jQuery学习笔记--标签切换

最新推荐文章于 2022-08-21 17:46:10 发布

thystar

最新推荐文章于 2022-08-21 17:46:10 发布

阅读量381

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/47957727

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

实现标签切换的代码

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/app.css" type="text/css" rel="stylesheet">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
    <ul id="tab1">
        <li class="tabin">标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <div class="content cfirst">
        内容1
    </div>
    <div class="cfirst">
        内容2
    </div>
    <div class="cfirst">
        内容3
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <ul id="tab2">
        <li class="tabin">装载完整页面</li>
        <li>装载部分页面</li>
        <li>装载网络数据</li>
    </ul>
    <div id="content2">
        <div id="realc">

        </div>
    </div>
</body>
</html>

. css

ul, li{
    margin: 0;
    padding: 0;
    list-style: none;
}

li{
    float:left;
    background-color: black;
    color: white;
    padding: 5px;
    margin-right: 2px;
    border: 1px solid white;
}

.tabin{
    background-color: #6e6e6e;
    border: 1px solid #6e6e6e;
}

.cfirst{
    clear: both;
    background-color: #6e6e6e;
    color: white;
    width: 300px;
    height: 100px;
    padding: 10px;
    display: none;
}

.content{
    display: block;
}

#tab2 li{
    float: left;
    background-color: #ffffff;
    color: blue;
    padding: 10px;
    margin-right: 2px;
    cursor: pointer;
}

#tab2 li.tabin{
    background-color: #f2f6f8;
    border: 1px solid #000000;
    border-bottom: 0;
    z-index: 100;
    position: relative;
}

#content2{
    width: 500px;
    height: 200px;
    padding: 10px;
    background-color: #f2f6f8;
    clear: both;
    border: 1px solid #000000;
    top: -2px;
    position: relative;
}

. js

$(document).ready(function(){
    $("#tab1 li").each(function(index){
        var liNode = $(this);
        $(this).mouseover(function(){
            timeoutid = setTimeout(function () {
                $("div.content").removeClass("content");
                $("#tab1 li.tabin").removeClass("tabin");
                $("div").eq(index).addClass("content");
                liNode.addClass("tabin");
            },300);
        }).mouseout(function(){
            clearTimeout(timeoutid);
        });
    });

    $("#realc").load("mytab.html");
    $("#tab2 li").each(function (index) {
        $(this).click(function(){
            $("#tab2 li.tabin").removeClass("tabin");
            $(this).addClass("tabin");
            if(index==0){
                $("#realc").load("mytab.html");
            }else if(index==1){
                $("#realc").load("mytab.html");
            }else if(index==2){
                $("#realc").load("mytab.html");
            }
        })
    })

});