标签页效果

╰+攻爆jí腚メ 2022-05-31 10:50 231阅读 0赞

**一个标签页的小实例：**

**tab.html：**

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>jQuery实例：标签页效果</title>
        <link type="text/css" rel="stylesheet" href="css/tab.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/tab.js"></script>
    </head>
    <body>
        <ul id="tabfirst">
            <li class="tabin">标签1</li>
            <li>标签2</li>
            <li>标签3</li>
        </ul>
        <div class="contentfirst">我是内容1</div>
        <div class="contentfirst">我是内容2</div>
        <div class="contentfirst">我是内容3</div>
    </body>
    </html>

**tab.css：**

ul,li {
        margin :0;
        padding:0;
        list-style:none;
    }
    #tabfirst li {
        float:left;
        background-color:#868686;
        color:white;
        padding:5px;
        margin-right:2px;
        border:1px solid white;
        cursor:pointer;
    }
    #tabfirst li.tabin {
        background-color:#6E6E6E;
        border:1px solid #6E6E6E;
    }
    div.contentfirst {
        clear:left;
        background-color:#6E6E6E;
        color:white;
        width:300px;
        height:100px;
        padding:10px;
        display:none;
    }
    div.contentin {
        display:block;
    }

**tab.js：**

var timeoutid;
    $(document).ready(function () {
        $("#tabfirst li").each(function (index) {
            //每一个包装li的jQuery对象都会执行function中的代码；
            //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值；
            //有了index的值之后，就可以找到当前标签对应的内容区域
            $(this).mouseover(function () {
                var liNode = $(this);
                timeoutid=setTimeout(function () {
                    //将原来现实的内容区域进行隐藏
                    $("div.contentin").removeClass("contentin");
                    //对有tabin的class定义的li清除tabin的class
                    $("#tabfirst li.tabin").removeClass("tabin");
                    //当前标签所对应的内容区域显示出来：
                    //$("div").eq(index).addClass("contentin");
                    //或者：
                    $("div.contentfirst:eq(" + index + ")").addClass("contentin");
                    $(liNode).addClass("tabin");
                }, 100);
            }).mouseout(function () {
                clearTimeout(timeoutid);
            });
        });
    });

**效果如下：**

![20180222155134596][]

[20180222155134596]: /images/20220531/2a30695ee92e4e6f862a8c51f0ad2f12.png