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 16 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JS前端加密算法示例
Dec 22 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
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 MPDF中文乱码的解决方式
2015/12/08 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python3最长回文子串算法示例
2019/03/04 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
几个Shell Script面试题
2012/08/31 面试题
董事长岗位职责
2013/11/30 职场文书
探矿工程师自荐信
2014/01/24 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年化验室工作总结
2014/11/21 职场文书
坎儿井导游词
2015/02/09 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
学校安全管理制度
2015/08/06 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers