jQuery其他操作

这篇文章写一个选项卡的实现。首先做一个HTML文件

<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div class="tab_box">
        <div>时事</div>
        <div class="hide">体育</div>
        <div class="hide">娱乐</div>
    </div>
</div>

然后设置css样式，将这个按照选项卡的方式显示出来。

*{
    margin: 0;
    padding: 0;
}
div.tab{
    height: 400px;
    width: 400px;
    margin: 50px;
    border: 1px solid green;
    
}
.tab .tab_menu ul li{
    width: 50px;
    display: inline;
}
.tab .tab_box{
    border-top: 1px solid blue;
}
.tab .tab_menu .selected{
    background-color: red;
}
.tab .tab_box .hide{
    display: none;
}

然后是为三个tab_menu下面的li设置响应鼠标点击响应函数，在响应函数中作2个操作。首先将选项卡按钮被点击的那个变色，另外2个恢复原来颜色。然后将选项卡菜单对应的内容显示出来，其他2个内容隐藏。

$(document).ready(function(){
  var $div_li = $(".tab .tab_menu ul li");
  $div_li.click(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
    var index = $div_li.index(this);
    $(".tab .tab_box > div").eq(index).show().siblings().hide();
  });
});

这样就实现了一个简单的选项卡控件。