选项卡jquery

选项卡

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

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

　　　　.show()　显示匹配的元素

　　　　.hide()　隐藏匹配的元素

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

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

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

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

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

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

完整：

　html:　

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

　jquery:

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