Implementing simple tabs with js

Tab selection cards are used very frequently on real web pages. Basically, every web page needs to use one or more tab selection cards.

We can use js to achieve a simple tab selection effect

The code is as follows:

<!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>Simple card selection effect</title>
    <style>
        body,ul{
            margin:0;
            padding:0;
        }
        li{
            list-style: none;
        }
        .nav ul{
            display: flex;
        }
        .nav li{
            width: 40%;
            margin: 1rem;
            text-align: center;
            font-size: 1.3rem;
        }
        .selected{
            background-color: yellow;
        }
        .content div{
            display: none
        }
        /* Initially only the first block of content is displayed*/
        .content div:nth-child(1){
            display: block;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <!-- Initially make the first option selected -->
            <li class="selected">Navigation 1</li>
            <li>Navigation 2</li>
            <li>Navigation 3</li>
        </ul>
    </div>
    <div class="content">
        <div>Content 1</div>   
        <div>Content 2</div>  
        <div>Content 3</div>   
    </div>
    <script>
            //Get all navigation options var li = document.querySelectorAll(".nav li");
            //Get all divs of the content
            var div = document.querySelectorAll(".content div")
            for(var i=0;i<li.length;i++){
                  //The key is to establish a connection between li and div li[i].index=i;
                li[i].onmouseover=function(){
                   // Clear all option styles and hide all contents for(var j=0;j<li.length;j++){
                        li[j].className="";
                        div[j].style.display="none"
                    }
                    //Set the style for the option on which the mouse is hovering, and its corresponding div will appear this.className="selected";
                    div[this.index].style.display="block";
                }
            }
        </script>
</body>

</html>

It should be noted that: this, this at this time is equivalent to li[i].
li[i].index=i; This step is essential, as it is the key to establishing a connection between li and div. If you directly change the code div[this.index].style.display="block"; to div[i].style.display="block";, the effect will not be achieved. This is because the value of i keeps increasing by one and will eventually be equal to li.length, resulting in an incorrect result that no matter which option the mouse is on, each div will not be displayed.

The correct effect diagram is:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: