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 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
从数组中随机取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内置的字符串处理函数详解
2017/02/04 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
JavaScript入门基础
2015/08/12 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
python进阶教程之循环对象
2014/08/30 Python
Python的另外几种语言实现
2015/01/29 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python3生成手写体数字方法
2018/01/30 Python
python实现弹跳小球
2019/05/13 Python
python颜色随机生成器的实例代码
2020/01/10 Python
浅谈Python中的字符串
2020/06/10 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
python实现图片转字符画
2021/02/19 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
ORACLE十问
2015/04/20 面试题
员工培训邀请函
2014/01/11 职场文书
八年级美术教学反思
2014/02/02 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
python文件目录操作之os模块
2021/05/08 Python
python process模块的使用简介
2021/05/14 Python
一篇文章带你复习java知识点
2021/06/28 Java/Android