JavaScript to achieve tab switching effect

This article shares the specific code of JavaScript to achieve the tab switching effect for your reference. The specific content is as follows

Build the main interface

HTML Code

<h1>Realize the tab switching effect</h1>
<ul id="tab">
    <li><a href="">Movies and TV</a></li>
    <li><a href="">Entertainment</a></li>
    <li><a href="">TV Series</a></li>
</ul>
<div id="content">
    <div id="content1">Latest movie recommendations:<br>"Fast and Furious"<br>"Big Hero 6"</div>
    <div id="content2">Hot entertainment recommendations:<br>"Running Man"<br>"The Voice of China"</div>
    <div id="content3">Popular TV series recommendations:<br>"Three Lives, Three Worlds"<br>"Our Times"</div>
</div>

Writing CSS files

Create a new CSS file and write CSS code to render the HTML interface written previously.

Remember to import the CSS file in the HTML file.

<link rel="stylesheet" href="mCSS.css" >

CSS file code

*{
    margin: 0;
    padding: 0;
}
 
#tab {
    overflow: hidden;
}
 
#tab li {
    float: left;
    list-style: none;
    width: 80px;
    height: 40px;
    text-align: center;
}
 
#tab li:first-child, #content1 {
    background: #ffcc00;
}
 
#tab li:first-child + li, #content2 {
    background: #ff00cc;
}
 
#tab li:last-child, #content3 {
    background: #00ccff;
}
 
#tab li a {
    line-height: 40px;
    color: white;
    text-decoration: none;
}
 
#content {
    position: relative;
}
 
#content1, #content2, #content3 {
    width: 300px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    display: none;
}
 
#content1{
    display: block;
}

Write JavaScript script files to achieve switching effects

JavaScript code

// When a certain label is clicked, the corresponding div is displayed, and the others are hidden.
// Find the element that triggered the event var as = document.querySelectorAll("#tab a");
// Bind event processing function for (var i = 0; i < as.length; i++) {
    as[i].onclick = function () {
        // Hide all divs
        var divs = document.querySelectorAll("#content>div");
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.display = "none";
        }
        // Let the corresponding div display // Get the href of the current a
        var i = this.href.lastIndexOf("#");
        var id = this.href.slice(i);
        console.log(id)
        document.querySelector(id).style.display = "block";
    }
 
}

Complete case code

mHTML.html

<link rel="stylesheet" href="mCSS.css" >
 
<h1>Realize the tab switching effect</h1>
<ul id="tab">
    <li><a href="#content1" >Movies and TV</a></li>
    <li><a href="#content2" >Entertainment</a></li>
    <li><a href="#content3" >TV series</a></li>
</ul>
<div id="content">
    <div id="content1">Latest movie recommendations:<br>"Fast and Furious"<br>"Big Hero 6"</div>
    <div id="content2">Hot entertainment recommendations:<br>"Running Man"<br>"The Voice of China"</div>
    <div id="content3">Popular TV series recommendations:<br>"Three Lives, Three Worlds"<br>"Our Times"</div>
</div>
 
 
<script src="mJS.js"></script>

mCSS.css

*{
    margin: 0;
    padding: 0;
}
 
#tab {
    overflow: hidden;
}
 
#tab li {
    float: left;
    list-style: none;
    width: 80px;
    height: 40px;
    text-align: center;
}
 
#tab li:first-child, #content1 {
    background: #ffcc00;
}
 
#tab li:first-child + li, #content2 {
    background: #ff00cc;
}
 
#tab li:last-child, #content3 {
    background: #00ccff;
}
 
#tab li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    color: white;
    text-decoration: none;
}
 
#content {
    position: relative;
}
 
#content1, #content2, #content3 {
    width: 300px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    display: none;
}
 
#content1{
    display: block;
}

mJS.js

// When a certain label is clicked, the corresponding div is displayed, and the others are hidden.
// Find the element that triggered the event var as = document.querySelectorAll("#tab a");
// Bind event processing function for (var i = 0; i < as.length; i++) {
    as[i].onclick = function () {
        // Hide all divs
        var divs = document.querySelectorAll("#content>div");
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.display = "none";
        }
        // Let the corresponding div display // Get the href of the current a
        var i = this.href.lastIndexOf("#");
        var id = this.href.slice(i);
        console.log(id)
        document.querySelector(id).style.display = "block";
    }
 
}

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:

The easiest way to implement Tab page switching in JavaScript (4 types)
Vue.js realizes the tab switching effect
Detailed explanation of classic examples of AngularJS tab switching function
JS realizes the tab switching effect
The simplest way to implement tab page switching with pure JavaScript (recommended)
JS to achieve the effect of switching tabs example code
A simple tab page with style written in pure css+js
JS realizes tab effect (with css)
Two ways to implement tabs in AngularJS

<<: How to center images horizontally and vertically in DIV or DIV

>>: Paragraph layout and line breaks in HTML web pages