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