js and jquery to achieve tab status bar switching effect

js and jquery to achieve tab status bar switching effect

Today we will make a simple case, using js and jquery to realize the purpose of switching by clicking on the tab bar, the effect is as follows:

The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Status bar switch</title>
  <style>
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
 
   .main {
    width: 720px;
    display: block;
    margin: 50px auto;
   }
 
   .table-title {
    width: 100%;
    height: 100%;
    border: 1px solid black;
   }
 
   .table-title ul {
    list-style: none;
    display: flex;
   }
 
   .table-title li {
    width: 25%;
    height: 100%;
    background-color: gainsboro;
    text-align: center;
    border-right: 1px solid black;
    cursor: pointer;
   }
 
   .table-title li:last-child {
    border-right: none;
   }
 
   .table-title li label {
    text-align: center;
    cursor: pointer;
   }
 
   .tab-box .tab-show {
    display: none;
    border: 1px solid black;
    border-top: none;
    text-align: center;
   }
 
   /* Display the first frame */
   .tab-box .tab-show:first-Child {
    display: block;
   }
 
   .change {
    opacity: 0.7;
   }
  </style>
  <script src="js/jquery-3.5.1.js"></script>
  <script>
   // js implements window.onload = function() {
    //Get elements var allLi = document.getElementsByTagName("li");
    var boxes = document.getElementsByClassName("tab-box")[0].children;
    //Traversal to achieve the switching effect for (var i = 0; i < allLi.length; i++) {
     //Define an attribute index value for each li allLi[i].index = i; 
     //Add click event allLi[i].onclick = function() {
      //Get the index value var index = this.index;
      //Display content boxes[index].style.display="block";
      allLi[index].style.opacity=0.7;
      for (var j = 0; j < allLi.length; j++) {
       //Change the style of the sibling element back if(j != index){
        boxes[j].style.display="none";
        allLi[j].style.opacity=1;
       }
      }
     }
    }
   }
   // jQuery implements $().ready(function() {
    $(".table-title li").click(function() {
     //Get the element index through the .index() method, starting from 0, and assign it to a variable var _index = $(this).index();
     // Make the _indexth content box displayed and the others hidden $(".tab-box>div").eq(_index).show().siblings().hide();
     //Change the style of the option box when it is selected, and remove the styles of several other options$(this).addClass("change").siblings().removeClass("change");
    });
   });
  </script>
 </head>
 <body>
  <div class="main">
   <div class="table-title">
    <ul>
     <li><label>Mobile phone digital</label></li>
     <li><label>Computer Work</label></li>
     <li><label>Daily necessities</label></li>
     <li><label>A must-have for home</label></li>
    </ul>
   </div>
   <div class="tab-box" style="width: 100%;height: calc(100%-40px);">
    <div class="tab-show">
     Mobile phone digital
    <div class="tab-show">
     Computer Office</div>
    <div class="tab-show">
     Daily necessities
    <div class="tab-show">
     Home essentials</div>
   </div>
  </div>
 </body>
</html>

If you want to learn more, you can click on two wonderful topics: JavaScript tab operation method summary jQuery tab operation method summary

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:
  • Four ways to implement tab switching in javascript
  • A streamlined JS DIV layer tab switching code
  • js (JavaScript) to achieve a simple example of TAB tag switching effect
  • JavaScript realizes the tab switching effect (self-written native js)
  • Vue.js component tabs to achieve tab switching effect
  • Native js to achieve tab switching
  • Example code for using jQuery to switch between div tabs
  • jQuery version of Tab switching
  • jQuery simple tab switching effect implementation method
  • Summary of Tab sliding tabs and image switching (multiple effects) implemented by jQuery

<<:  Detailed explanation of special phenomena examples of sleep function in MySQL

>>:  Tutorial on building svn server with docker

Recommend

How to install Linux system (Redhat8) and virtual machine network configuration in VMware

Table of contents 1. Install vmware 1.1 Download ...

Solution to the problem of crash when opening the command line window after installing MySQL 5.7

Preface I recently installed MySQL 5.7 and found ...

Vue implements login jump

This article example shares the specific code of ...

Native js to implement form validation function

Table of contents When developing, analyzing the ...

Detailed explanation of the practical application of centos7 esxi6.7 template

1. Create a centos7.6 system and optimize the sys...

MySQL 5.7 installation and configuration tutorial under CentOS7 64 bit

Installation environment: CentOS7 64-bit MINI ver...

HTML implements a fixed floating semi-transparent search box on mobile

Question. In the mobile shopping mall system, we ...

Implementing a simple Christmas game with JavaScript

Table of contents Preface Achieve results Code CS...

A brief discussion on the role of Vue3 defineComponent

Table of contents defineComponent overload functi...

Solution to CSS anchor positioning being blocked by the top fixed navigation bar

Many websites have a navigation bar fixed at the ...

Native js implements custom scroll bar component

This article example shares the specific code of ...

Complete Tutorial on Deploying Java Web Project on Linux Server

Most of this article refers to other tutorials on...

How to completely delete the MySQL service (clean the registry)

Preface When installing the executable file of a ...

How to check the version of Kali Linux system

1. Check the kali linux system version Command: c...

Web page CSS priority is explained in detail for you

Before talking about CSS priority, we need to und...