使用jQuery实现内容随tab目录切换

效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        #main{
            width: 500px;
            margin: 50px auto;
        }
        #tab{
            list-style: none;
            width: 500px;
            height: 40px;
            line-height: 40px;
            background: red;
        }
        #tab li{
            float: left;
            height: 100%;
            width: 25%;
            text-align: center;
            cursor: pointer;
        }
        #tab1{
            background: aqua;
        }
        #tab2{
            background: #ffe200;
        }
        #tab3{
            background: #f500ff;
        }
        #tab4{
            background: #00ff09;
        }
        #container{
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
        #container1{
            display: block;
            background: aqua;
        }
        #container2{
            display: none;
            background: #ffe200;
        }
        #container3{
            display: none;
            background: #f500ff;
        }
        #container4{
            display: none;
            background: #00ff09;
        }
    </style>
    <script src="js/jquery-3.4.1.js"></script>
    <script>

        $(function(){

            var $containers = $('#main > #container > div');

            $('#tab > li').click(function () {
                $containers.css("display","none");
                var index = $(this).index();
                $containers[index].style.display = "block";
            });
        });

    </script>
</head>
<body>

    <div id="main">
        <ul id="tab">
            <li id="tab1">标题一</li>
            <li id="tab2">标题二</li>
            <li id="tab3">标题三</li>
            <li id="tab4">标题四</li>
        </ul>
        <div id="container">
            <div id="container1">内容一</div>
            <div id="container2">内容二</div>
            <div id="container3">内容三</div>
            <div id="container4">内容四</div>
        </div>
    </div>
</body>
</html>
Code Lee
发布了63 篇原创文章 · 获赞 28 · 访问量 1万+
私信关注
使用jQuery实现内容随tab目录切换

猜你喜欢
