• jquery自动切换tabs选项卡


    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
        <%
    String path = request.getContextPath(); 
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Insert title here</title>


    <!-- 注意引进的文件顺序,你做的没有效果也许就是因为文件引进顺序不对! -->

    <script type="text/javascript" src="<%=path %>/js/jquery-1.2.6.js"></script>
    <script src="<%=path%>/js/ui.core.js" type="text/javascript"></script>
    <link href="<%=path%>/css/ui.tabs.css" rel="stylesheet" type="text/css" />
    <script src="<%=path%>/js/ui.tabs.js" type="text/javascript"></script>

    <style type="text/css">
    code {
        font-family: "Courier New", Courier, monospace;
    }
    </style>
    <script type="text/javascript">
                $(function() {
                alert(1);
                    $('#rotate > ul').tabs({ fx: { opacity: 'toggle' },selected:0}).tabs('rotate', 500000);
                });
    </script>  
    </head>
    <body>
    <hr size="10" color="red"/>
    <H1>Rotating UI Tabs example</H1>
    <div id="rotate">
          <ul>
            <li><a href="#div1"><span>新闻</span></a></li>
            <li><a href="#div2"><span>论坛</span></a></li>
            <li><a href="#div3"><span>博客</span></a></li>
          </ul>
    <div id="div1"><h4>DIV1</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    volutpat. </div>
    <div id="div2"><h4>DIV2</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div>
    <div id="div3"><h4>DIV3</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    推荐系统-01-简单逻辑回归
    顶部BANNER
    大数据-12-Spark+Kafka构建实时分析Dashboard
    大数据-10-Spark入门之支持向量机SVM分类器
    大数据-11-案例演习-淘宝双11数据分析与预测
    大数据-09-Intellij idea 开发java程序操作HDFS
    大数据-08-Sqoop入门
    大数据-07-Spark之流数据
    准确度,精确度, 召回率
    [转]springcloud(九):配置中心和消息总线(配置中心终结版)
  • 原文地址:https://www.cnblogs.com/top5/p/1763839.html
Copyright © 2020-2023  润新知