jQuery tab切换收集
2017-01-16 20:59
281 查看
1.切换一
2.切换二
3.切换三
4.切换4
$(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; });
2.切换二
$('#tit span').click(function() { var i = $(this).index();//下标第一种写法 //var i = $('tit').index(this);//下标第二种写法 $(this).addClass('select').siblings().removeClass('select'); $('#con li').eq(i).show().siblings().hide(); });
3.切换三
$(".opennav li").hover(function(){ $(".opennav li").removeClass("openhover"); $(this).addClass("openhover"); $(".openli").hide(); $(".openli").eq($(".opennav li").index(this)).show(); });
4.切换4
//Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; });
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- 分析选项卡底部内凹圆角制作
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- seajs学习教程之基础篇
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果