jquery自动切换tabs选项卡的具体实现


Posted in Javascript onDecember 24, 2013

本节内容:
jquery实现自动切换选项卡。

代码:

<%@ 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>自动切换tabs选项卡-3water.com</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>此处放置测试用的显示内容,自动切换tabs选项卡,自动切换tabs选项卡,自动切换tabs选项卡。
自动切换tabs选项卡,自动切换tabs选项卡,自动切换tabs选项卡。自动切换tabs选项卡。</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>
Javascript 相关文章推荐
js中巧用cssText属性批量操作样式
Mar 13 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
vue内置指令详解
Apr 03 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 #Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 #Javascript
JS控制图片等比例缩放的示例代码
Dec 24 #Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 #Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 #Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 #Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 #Javascript
You might like
介绍一些PHP判断变量的函数
2012/04/24 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
php桥接模式应用案例分析
2019/10/23 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
模拟select的代码
2011/10/19 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
详解Django通用视图中的函数包装
2015/07/21 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
黄金酒广告词
2014/03/21 职场文书
公司委托书范本
2014/04/04 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
ES6 解构赋值的原理及运用
2021/05/25 Javascript