JS实现选项卡和JQ实现选项卡

在这里简单的介绍一下在页面布局中很重要的选项卡，在页面中，选项卡也是经常使用到的布局，所以我们需要多加的练习掌握才可以，除了用jQuery熟练实现它的功能，更需要知道如何用JavaScript原生实现选项卡的功能。接下来废话不多说，先上jq完成的选项卡：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 150px;
            /* height: 200px; */
            border: 2px solid #6e6e6e;
            margin: 20px auto;
            text-align: center;
            overflow: hidden;
        }
        .box ul{
            width: 150px;
            /* height: 49px; */
            list-style: none;
            border-bottom: 1px solid #6e6e6e;
        }
        .box li{
            float: left;
            width: 50px;
            /* height: 48px; */
            line-height: 40px;
            cursor: pointer;
        }
        .sbox div{
            height: 150px;
            display: none;
        }
        .sbox .active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li style = "background: blue">1</li>
            <li style = "background: red">2</li>
            <li style = "background: pink">3</li>
        </ul>
        <div class="sbox">
            <div style = "background: blue" class="active">1111</div>
            <div style = "background: red">22222</div>
            <div style = "background: pink">333333</div>

        </div>
    </div>
</body>
<script src="../jquery.js"></script>
<script>
    $(".box").children("ul").children("li").click(function(event){
        // console.log(index);
        event.preventDefault()
        $(".sbox").children("div").css("display","none")
        $(".sbox").find("div").eq($(this).index()).css("display","block")
})


</script>
</html>

这里面我们要懂得如何去获取li中的索引，然后成功的运用到下面的div中。

接下来是js原生的选项卡完成：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            margin: 0 auto;
            border: solid 1px black;
        }

        .title h2 {
            float: left;
            font-size: 20px;
            border: 1px solid black;
            background-color: #ccc;
            padding: 10px 0;
            width: 48px
        }

        .cont p {
            width: 200px;
            background: #eee;
            margin: 0;
            display: none;
        }

        .cont p:nth-child(1) {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">
            <h2>111</h2>
            <h2>222</h2>
            <h2>333</h2>
            <h2>444</h2>
        </div>
        <div class="cont">
            <p>第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容</p>
            <p>第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容</p>
            <p>33第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容</p>
            <p>444第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容</p>
        </div>
    </div>
</body>
<script>
    var ah2 = document.querySelectorAll(".title h2")
    var ap = document.querySelectorAll(".cont p")
    // 遍历元素
    for (var i = 0; i < ah2.length; i++) {
        // 编号
        ah2[i].index = i;
        // 各种事件
        ah2[i].onclick = function () {
            for (var j = 0; j < ap.length; j++) {
                ap[j].style.display = "none"
            }
            // 显示
            ap[this.index].style.display = "block";
        }

    }
</script>

</html>

在有关与选项卡的主要知识点就是双侧循环中准确的找到你要找的索引，然后利用索引实现需要的功能，实现所谓的选项卡的功能。

以上。

JS实现选项卡和JQ实现选项卡

猜你喜欢