jq写tab切换

Posted Candy-Yao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq写tab切换相关的知识,希望对你有一定的参考价值。

1 $(‘.index-news-sub-box ul li‘).click(function(){
2     var i=$(this).index();
3     var img=$(‘.index-news-img-box a img‘);
4     img.removeClass(‘z-index-2‘);
5     img.eq(i).addClass(‘z-index-2‘).siblings().removeClass(‘z-index-2‘);
6 });

原理:给某个按钮绑定点击事件;被点击的当前元素显示(可以设置display:block;也可以设置z-index:1;),其他的兄弟元素隐藏(可以设置display:none;也可以设置z-index:0;).

前提:按钮个数和被切换的内容区的个数相等,且按钮要有想同的标识(class,id,或标签),内容区同理。

以上是关于jq写tab切换的主要内容,如果未能解决你的问题,请参考以下文章

tab切换-2016.6.4

jq 版的tab切换

jq封装的tab切换

Android选项卡片段不调用OnCreateView从tab2切换到tab1

jq-demo-tab切换

jq使用自定义属性实现由title的tab切换