<%@ 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. OJ题目分类

    POJ题目分类 | POJ题目分类 | HDU题目分类 | ZOJ题目分类 | SOJ题目分类 | HOJ题目分类 | FOJ题目分类 | 模拟题: POJ1006 POJ1008 POJ1013 P ...

  2. install Active Directory域控制器

    设置Active Directory域控制器 正如我们在网络与系统配置专题文章中所提到的那样,我们已将两部服务器设置为对应于内部域“intdomain.com”的Active Directory域控制 ...

  3. 机器学习笔记1——Introduction

    Introduction What is Machine Learning? Two definitions of Machine Learning are offered. Arthur Samue ...

  4. Ubuntu下Django初体验（二）——创建工程及应用

    一.工程目录详解 创建工程后得到如下目录: 1. manage.py 管理项目.创建数据库.启动服务器等.测试等. 查看子命令: python manage.py 启动服务器: python mana ...

  5. JavaScript面向对象继承方法

    JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来 ...

  6. 学习：Linux基础知识<一>

    >>硬盘分区模式 硬盘分区模式一般如下: -- /  (根目录) -- /usr    (操作系统) --/home (用户信息) -- /var    (默认服务器的登录文件,邮件与WW ...

  7. Expression Blend 4 激活码

    Expression Blend 4 激活码: 6WDDQ-K7D4F-GQGF4-2VYBJ-8K6MB

  8. NavBarControl 左侧菜单

    (1)示例图片 具体实现: 一. using DevExpress.XtraNavBar; 二. 从窗体上拖一个 NavBarControl 控件 命名为:nbcLeft 三.窗体OnLoad 事件 ...

  9. 开源的连接池技术DBCP和C3P0

    概述: Sun公司约定: 如果是连接池技术,需要实现一个接口! javax.sql.DataSource;   相关jar包和资料下载 1.1  DBCP连接池: l  DBCP 是 Apache 软 ...

  10. 通过GWT RPC实现客户端与服务器端的交互

    GWT有两种与服务端进行交互的技术:GWT RPC和基于普通AJAX的远程交互技术.这里只介绍GWT RPC技术. 一个完整的RPC服务至少包含三个Java文件: 1.客户端远程接口类,需要继承Rem ...