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 加上最后自己的验证
Nov 04 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
Javascript中With语句用法实例
May 14 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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--用万网的接口实现域名查询功能
2012/12/13 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
关于ES6尾调用优化的使用
2020/09/11 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
公司酒会主持词
2015/07/02 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB