jQuery-Tab切换

切换布局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>切换练习</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/demo.js"></script>
</head>

<body>
    <ul id="tab">
        <li class="tabon">标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <div class="content current-tab">
        标签1内容
    </div>
    <div class="content">
        标签2内容
    </div>
    <div class="content">
        标签3内容
    </div>
</body>

</html>
body{font-size: 14px;}
ul,li{padding:0;margin: 0;list-style: none;}
ul{overflow: hidden;}
li{float: left;background: #ccc;margin-right: 10px;padding:5px;cursor: pointer;}
.tabon{background:#666;color:#fff;}
.content{background: #666;width: 300px;height: 100px;padding: 5px;display:none;}
.current-tab{display: block;}

切换的实现：

var timeoutid;
$(document).ready(function() {
    $("#tab li").each(function(index) {
        var liNode = $(this);
        $(this).mouseover(function() {
            timeoutid = setTimeout(function() {
                $("div.current-tab").removeClass("current-tab");
                $(".content").eq(index).addClass("current-tab");
                $("#tab li.tabon").removeClass("tabon");
                liNode.addClass("tabon");                
            }, 300);
        }).mouseout(function() {
            clearTimeout(timeoutid);
        })
    })
});
posted @ 2015-10-12 17:08  tinyphp  Views(276)  Comments(0)  Edit  收藏  举报