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 中的replace方法说明
Apr 13 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
小程序实现侧滑删除功能
Jun 25 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 代码优化之经典示例
2011/03/24 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
python 链接和操作 memcache方法
2017/03/04 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
高中运动会入场词
2014/02/14 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
公证委托书大全
2014/04/04 职场文书
初中作文评语大全
2014/04/23 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
国际金融专业自荐信
2014/07/05 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server