jQuery简单tab切换效果实现方法


Posted in Javascript onApril 08, 2015

本文实例讲述了jQuery简单tab切换效果实现方法。分享给大家供大家参考。具体如下:

<script src="js/jquery-latest.js"></script>
<SCRIPT language=javascript type=text/javascript>
$(document).ready(function () {
$('.tabtitle li').click(function () {
var index = $(this).index();
$(this).attr('class',"tabhover").siblings('li').attr('class','taba');
$('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();
});
  var t = 0;
  var timer = setInterval(function(){
    if( t == $('.tabtitle li').length ) t = 0;
    $('.tabtitle li:eq('+t+')').click();
    t++;
  }, 700)
})
</SCRIPT>
<div class="maintab">
<ul class="tabtitle">
<li class="tabhover"><a href="#">选择标题1</a></li>
 <li class="taba"><a href="#">选择标题2</a></li>
 <li class="taba"><a href="#">选择标题3</a></li>
 <li class="taba"><a href="#">选择标题4</a></li>
 <li class="taba"><a href="#">选择标题5</a></li>
</ul>
<div class="tabcontent">
选择内容1
</div>
<div class="tabcontent" style="DISPLAY: none">
选择内容2
</div>
<div class="tabcontent" style="DISPLAY: none">
选择内容3
</div>
<div class="tabcontent" style="DISPLAY: none">
选择内容4
</div>
<div class="tabcontent" style="DISPLAY: none">
选择内容5
</div>
</div>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
js实现加载更多功能实例
Oct 27 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 #Javascript
jQuery控制cookie过期时间的方法
Apr 07 #Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 #Javascript
JavaScript实现信用卡校验方法
Apr 07 #Javascript
jQuery控制网页打印指定区域的方法
Apr 07 #Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 #Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
php实现网页端验证码功能
2017/07/11 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python集合删除多种方法详解
2020/02/10 Python
Python实现名片管理系统
2020/02/14 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
证婚人搞笑证婚词
2014/01/10 职场文书
如何撰写岗位职责
2014/02/01 职场文书
学校门卫岗位职责
2014/03/16 职场文书
社区科普工作方案
2014/06/03 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python