jQuery之选项卡的简单实现

jQuery实现选项卡功能。首先将界面搭建好。

有导航头tab_menu，还有内容tab_box。

要实现的效果就是，点击后，将相应的内容显示出来，其他内容隐藏掉。

同时为了展现选中状态，为选中的项添加背景，以示区别。

这一次，我自己写了代码，先看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>

html中，需要一个大的div，里面有两个子div，一个作为导航头tab_menu，一个作为内容体tab_box。css代码负责布局html内容。

css部分：
代码如下:
*{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    /*border:1px solid;*/
}
.tab_menu{
    clear:both;
}
.tab_menu li{
    float:left;  //将导航头左飘
    text-align:center;  //将文字居中
    list-style:none;  //去除标记符号
    background:#F1F1F1; //设置默认背景色
    border:1px solid #898989; //设置边框色
    margin-right:4px; //每个li之间的距离为4px
    cursor:pointer;  //鼠标浮上之后，会有小手的标示出现
    padding:1px 6px; //控制li的内部距离
    border-bottom:none;

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{//为选中的选项加背景与颜色
    color:#FFF;
    background:#6D84B4;
}
.tab_box{
    clear:both; //清楚float效果的影响
    height:100px; //设置高度为100px
    border:1px solid #898989; //设置内容体的边框样式
}
.hide{//隐藏需要隐藏的内容div
    display:none;
}

待布局完成之后，进行jQuery的动作：
代码如下:
<script type='text/javascript'>
$(function(){
    //1.点击时改变css属性，移除之前的selected选项，添加新的selected选项