<%@ 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>

jquery自动切换tabs选项卡的更多相关文章

  1. 第二百节，jQuery EasyUI，Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  2. 基于jQuery UI的tabs选项卡美化

    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...

  3. jQuery 标签切换----之选项卡的实现

    这一次,我自己写了代码,先看html部分: <div class="tab"> <div class="tab_menu"> <u ...

  4. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

  6. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  8. jquery叠加页片自动切换特效

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...

  9. HTML+JS+DOM【选项卡自动切换】

    最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...

随机推荐

  1. Android之ContextMenu的使用方法以及与OptionMenu的区别

    >> ContextMenu是android的context menu上下文菜单,选择某项VIEW后长按menu键,就会显示出来.比如EditeText就可以通过长按来弹出拥有“cut”, ...

  2. HDU 4604 Deque 二分最长上升子序列

    题目大意就是给一个deque 然后有n个数,依次进行操作,每种操作,你可以把这个数放在deque首部,也可以放在尾部,也可以扔掉不管,但是要保证deque中的数是非递减的.最要求deque中最长能是多 ...

  3. JSP_DAO方式实现数据库查询（MyEclipse10,Tomcat7.0,JDK1.7,）——Java Web练习（四）

    1.项目结构: 2.创建数据库.表.插入记录 create database TestDao; use TestDao; create table student( stuid int, userna ...

  4. SAP HANA STRING_AGG

    HANA Version 1.00.73.00.389160 不支持STRING_AGG,所以只能,,,,,,,, DROP PROCEDURE ""."ZCONCAT_ ...

  5. [TypeScript] Configuring a New TypeScript Project

    This lesson walks you through creating your first .tsconfig configuration file which will tell the T ...

  6. DTRACE 专家

    http://dtrace.org/blogs/bmc/ https://github.com/bcantrill http://www.tudou.com/programs/view/Q6fHZFg ...

  7. apache服务器php程序

    1.全是.php结尾的.如何首页是index 2.安装完apache,如果输入 http://localhost:50/ 若出现 it works ,代表apache运作正常

  8. hdu2039java

    三角形 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  9. Android开发之设定Dialog的位置

    今天自定义了一个对话框,但是弹出时默认是显示在屏幕中间.主要代码:menuDialog = new AlertDialog.Builder(this).create();                ...

  10. Java基础知识强化之IO流笔记23：计算机是如何识别把两个字节拼接为中文（附加）

    1. 计算机是如何识别什么时候该把两个字节转换为一个中文呢? 在计算机中中文的存储分两个字节: • 第一个字节肯定是负数. • 第二个字节常见的是负数,可能有正数.但是没影响. 2. 代码示例: pa ...