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 相关文章推荐
深入理解javascript中return的作用
Dec 30 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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
php的access操作类
2008/04/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php生成curl命令行的方法
2015/12/14 PHP
JS input 数字验证代码
2009/07/30 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python图像和办公文档处理总结
2019/05/28 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python list运算操作代码实例解析
2020/01/20 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
pytorch数据预处理错误的解决
2020/02/20 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
傲盾软件面试题
2015/08/17 面试题
后进生转化工作制度
2014/01/17 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
村抢险救灾方案
2014/05/09 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
社区元宵节活动总结
2015/02/06 职场文书
端午节寄语2015
2015/03/23 职场文书
公司费用报销管理制度
2015/08/04 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS