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

 更新时间:2015年04月08日 08:57:31   作者:企鹅不笨  
这篇文章主要介绍了jQuery简单tab切换效果实现方法,涉及jQuery链式操作及遍历的技巧,是非常具有实用价值的功能,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • jQuery 如何先创建、再修改、后添加DOM元素

    jQuery 如何先创建、再修改、后添加DOM元素

    这篇文章主要介绍了jQuery 如何创建、修改、添加DOM元素,需要的朋友可以参考下
    2014-05-05
  • jQuery ui实现动感的圆角渐变网站导航菜单效果代码

    jQuery ui实现动感的圆角渐变网站导航菜单效果代码

    这篇文章主要介绍了jQuery ui实现动感的圆角渐变网站导航菜单效果代码,涉及jquery插件构造圆角图形及页面过度效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery插件之Tocify动态节点目录菜单生成器附源码下载

    jQuery插件之Tocify动态节点目录菜单生成器附源码下载

    Tocify是一个能够动态生成文章节点目录的jQuery插件,通过本文给大家分享jQuery插件之Tocify动态节点目录菜单生成器,对tocify菜单生成器相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 使用jquery的cookie实现登录页记住用户名和密码的方法

    使用jquery的cookie实现登录页记住用户名和密码的方法

    今天小编就为大家分享一篇关于使用jquery的cookie实现登录页记住用户名和密码的方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • JQuery Tips(4) 一些关于提高JQuery性能的Tips

    JQuery Tips(4) 一些关于提高JQuery性能的Tips

    如今咱祖国已经崛起了..电脑的配置也是直线上升.可是js的性能问题依然不可小觑..尤其在万恶的IE中..js引擎速度本来就慢..如果JS如果再写不好,客户端多开几个窗口假死肯定是家常便饭了.废话不说了,下面说说js性能提升的一些小Tips.
    2009-12-12
  • jquery图片倾斜层叠切换特效代码分享

    jquery图片倾斜层叠切换特效代码分享

    这篇文章主要介绍了jquery图片倾斜层叠切换特效,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • 使用jQuery的将桌面应用程序引入浏览器

    使用jQuery的将桌面应用程序引入浏览器

    jQuery 逐渐从其他 JavaScript 库选择中脱颖而出,并且成为 Web 开发人员的最佳选择。它迅速成为希望简化客户端开发和快速高效地创建富 Internet 应用程序(RIA)的程序员的首选。
    2010-11-11
  • jQuery实现基本动画效果的方法详解

    jQuery实现基本动画效果的方法详解

    这篇文章主要介绍了jQuery实现基本动画效果的方法,结合实例形式分析了jQuery animate()方法实现动画效果相关操作技巧,需要的朋友可以参考下
    2018-09-09
  • jQuery实现计算器功能

    jQuery实现计算器功能

    这篇文章主要为大家详细介绍了jQuery实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 基于jQuery拖拽事件的封装

    基于jQuery拖拽事件的封装

    这篇文章主要为大家详细介绍了基于jQuery拖拽事件的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11

最新评论