当前位置: 编程技术>jquery
Jquery tab选项卡的实现代码
来源: 互联网 发布时间：2014-09-03
本文导语: Jquery封装tab选项卡功能，用到了Jquery中的children()这个方法来获取父类中直接子元素。 2，html部分 代码示例: Jquery tab选项卡-www. ul,li,div{ margin:0; padding:0;} ul,li{ list-style:none;} .tabWrap{ width:450px; margin:0 auto 50px; overflow...
Jquery封装tab选项卡功能，用到了Jquery中的children()这个方法来获取父类中直接子元素。
2，html部分
代码示例:
Jquery tab选项卡-www.
ul,li,div{ margin:0; padding:0;}
ul,li{ list-style:none;}
.tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}
.tab{ background:#F93; overflow:hidden; width:450px;}
.tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}
.tab li.on{background:#F60;}
.tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }
.tabContent .hide{ display:none;}
- 选项卡1
- 选项卡2
- 选项卡3
1111
- 选项卡1
- 选项卡2
- 选项卡3
1111
2，js代码部分
代码示例:
$(function(){
function tabs(tabMenu,on,tabContent){
$(tabContent).each(function(){
$(this).children().eq(0).show();
});
$(tabMenu).each(function(){
$(this).children().eq(0).addClass(on);
});
$(tabMenu).children().hover(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabMenu).children().index(this);
$(tabContent).children().eq(index).show().siblings().hide();
});
}
tabs(".tab","on",".tabContent");
})
直接引用以上的js代码即可。
js代码的实现思路：
1，function tabs(tabMenu,on,tabContent){}，使用这个函数来封装js。
调用方式：tabs(".tab","on",".tabContent")，其中tabMenu是指li外层ul，on是指当鼠标移上去li，呈现一个背景，tabContent 是指content的外层！
2，接着使用each进行遍历，找到第一个子元素li增加一个类on，第一个content让她们显示！
当鼠标移到任何一个li时，让当前的li增加一个类on，同辈元素删除类on，然后索引当前的li，看是第几个，最后找出content，如果索引值和li的索引值相同的话则显示内容，将同辈元素隐藏掉。
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。