jQuery实现tab标签切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>tab</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    .main {
        width: 600px;
        height: 600px;
        background-color: lightblue;
        margin: 10px auto;

    }
    .menu {

        border:1px solid #red;
        width: 600px;
        /*height: 40px;*/

 }
    .menu li {
        width: 100px;
        height: 40px;
        line-height: 40px;
        float: left;
        list-style: none;
        border: 1px solid white;
        /*background-color: black;*/
 border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: white;
        text-align:center;

    }
    .main li:hover {
        color:black;
        background-color: green;
        font-size: 1.2em;
    }
    .content {
        width: 600px;
        height: 560px;
        background-color: lightgreen;
        float: left;
    }
    #c1 {
        width: 100%;
        height: 500px;
        background-color: antiquewhite;
        float: left;
    }
    .current{
        background-color: blue;
    }
    .hide {
        display: none;

    }


</style>
<body>
<div class="main">
    <ul class="menu">
        <li index="c1" onclick="tab(this)" class="current">国产新片</li>
        <li index="c2" onclick="tab(this)" >综艺新片</li>
        <li index="c3" onclick="tab(this)" >日韩新片</li>
    </ul>
    <div class="content">
        <div id="c1" >
            <ul>
                <li>我是标题01</li>
                <li>我是标题02</li>
                <li>我是标题03</li>
                <li>我是标题04</li>
                <li>我是标题05</li>
            </ul>
        </div>
        <div id="c2" class="hide">
            <ul>
                <li>我是最新的综艺新片01</li>
                <li>我是最新的综艺新片02</li>
                <li>我是最新的综艺新片03</li>
                <li>我是最新的综艺新片04</li>
                <li>我是最新的综艺新片05</li>
            </ul>

        </div>
        <div id="c3" class="hide">
            <ul>
                <li>我是日韩新片01</li>
                <li>我是日韩新片02</li>
                <li>我是日韩新片03</li>
                <li>我是日韩新片04</li>
                <li>我是日韩新片05</li>
            </ul>

        </div>
    </div>

</div>
<script>
    function tab(self) {
        $(self)
            .addClass("current")    //将当前选项卡高亮
 .siblings()   //将其他非当前选项卡取消高亮，先选择当前的兄弟节点
 .removeClass("current")   //再取消高亮样式
 var box = "#" + $(self).attr("index")   //获取当前自定义索引属性，获取当前
 $(box)
            .removeClass("hide")  //去掉他的隐藏样式，将对应的内容盒子显示出来
 .siblings()  //再讲其他兄弟盒子内容隐藏，首先获取其他兄弟节点
 .addClass("hide")   //给这些兄弟节点添加隐藏样式


 }
</script>

</body>
</html>
相关文章
