标签页效果

一个标签页的小实例：

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);
        });
    });
});

效果如下：

猜你喜欢