选项卡jquery

 

选项卡

　　选中标题，显示对应内容，如图：

　　　　

 

 

 想要实现该效果非常的简单，只要使用jQuery以下方法就可以，

　　　　.show()　显示匹配的元素

　　　　.hide()　隐藏匹配的元素

　　　　.siblings()　匹配元素的所有兄弟元素

　　

 　　让当前元素显示，当前元素的所有兄弟元素隐藏。

 

 给选中的元素添加字体颜色和下划线:

.cover {
    color: #5F9EA0;
    border-bottom: 2px solid #5F9EA0;
}

　
　　　　.addClass()　对元素添加类名
　　　　.removeClass()　对元素移除类名

　　

 　　给当前元素添加样式类名，而其所有兄弟元素移除该类名。

 

 

 

完整：

　html:　

<ul class="title">
    <li class="cover">标题1</li>
    <li>标题2</li>
</ul>
<ul class="content">
    <li>内容1</li>
    <li>内容2</li>
</ul>

　jquery:

$(".title li").click(function(){
    $(this).addClass("cover").siblings().removeClass("cover");
    $(".content li").eq($(this).index()).show().siblings().hide();
})