JS achieve tabs and tab achieve JQ

Here a brief look very important in the page layout tab, the page, the tab is also frequently used to layout, so we need more practice to master before they can, in addition to achieving its function with jQuery skilled, more needs I know how to function tab using JavaScript native. Next ado, the first complete jq tab:

<!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>

That which we want to know how to get li in the index, and then use the success of following the div.

Next is js native tab completion:

<!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 > one news contents of the first contents of the first News News contents of the first news content first news contents of the first news content first news contents of the first news content first news contents of the first news content first news contents of the first news content first news content </ the p- > 
            < the p- > The second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second second news content The second news content news content second news contents of the second news contents of the second second news content news content </ the p- > 
            < the p- >33 second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second second news content news contents of the second news contents of the second news contents of the second second news content news content </ the p- > 
            < the p- > 444 second news contents of the second second news content news content news content of the second The second two news content news content second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second second news content news content < / P > 
        </ div > 
    </ div > 
</ body > 
< Script > 
    var AH2 = document.querySelectorAll ( " .title H2 " )
     var AP = document.querySelectorAll ( " .cont P ")
    // traverse the elements 
    for ( var I =  0 ; I < ah2.length; I ++ ) {
         // No 
        AH2 [I] .index = I;
         // events 
        AH2 [I] .onclick =  function () {
             for ( var J =  0 ; J < ap.length; J ++ ) { 
                AP [J] .style.display =  " none " 
            } 
            // show 
            AP [ the this.index].style.display = "block";
        }

    }
</script>

</html>

In the main points related to the tab that bilateral cycle accurately find the index you're looking for, then use the index to achieve the functionality required to realize the function of the so-called tab.

the above.

JS achieve tabs and tab achieve JQ

Guess you like