zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    scala程序启动时,Could not locate executable nullinwinutils.exe in the Hadoop binaries解决方案
    binlog_format的模式有哪几种?各自的特点是?
    解决IDEA控制台junit不能用Scanner输入问题
    【转】什么是乐观锁,什么是悲观锁
    lyt经典版MySQL基础——流程控制结构
    ambari 2.5.0源码编译安装
    linux(centeros)svn的安装
    机器学习
    算法思想整理
    lucene
  • 原文地址:https://www.cnblogs.com/top5/p/1763839.html
Copyright © 2011-2022 走看看