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:

js to implement simple tab function
js to achieve a simple switchable tab effect
js tab implementation method
JavaScript realizes the tab switching effect (self-written native js)
Detailed explanation of JS implementation of tab example
js to achieve Tab tab switching effect
Two ways to write JS tab plugins (jQuery and class)
js uses iframe to achieve tab effect
js to realize simple tab production
Writing tab effects with JS

<<: How to solve the mysql insert garbled problem

>>: Detailed explanation of Linux zabbix agent deployment and configuration methods

Solution for Docker Swarm external verification load balancing not taking effect

Implementing simple tabs with js

Solution for Docker Swarm external verification load balancing not taking effect

Example code for implementing multiple line omissions using three methods of advanced CSS

Podman boots up the container automatically and compares it with Docker

mysql8.0 windows x64 zip package installation and configuration tutorial

Problems encountered when uploading images using axios in Vue

Tutorial on how to quickly deploy a Nebula Graph cluster using Docker swarm

This article will show you how JavaScript garbage collection works

Detailed explanation of modifying the default style of external component Vant based on Vue cli development

VMWare Linux MySQL 5.7.13 installation and configuration tutorial

Detailed explanation of eight ways to optimize MySQL database (classic must-read)

Recommend

MySQL 5.7 mysql command line client usage command details

Six important selectors in CSS (remember them in three seconds)

How to export mysql query results to csv

Discussion on the Issues of Image Button Submission and Form Repeated Submission

MySQL 5.7.20 free installation version configuration method graphic tutorial

Implementing a simple calculator based on JavaScript

HTML Tutorial: Collection of commonly used HTML tags (4)

Vue custom optional time calendar component

mysql 5.7.20 win64 installation and configuration method

JavaScript lazy loading detailed explanation

Native JS to implement real-time clock

How to quickly modify the host attribute of a MySQL user

Is it true that the simpler the web design style, the better?

Detailed explanation of common for loop in JavaScript statements

CSS clicks on the radio to switch between two image styles and only one of the multiple radios can be checked