SoFunction
Updated on 2025-02-28

JS code examples to implement tab effects

The effect of the tab is estimated to be often involved in future projects. If you are still half-skilled in the code, please write it down.
Let's first lay out a simple page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{margin: 0;padding: 0;list-style: none;}
      #box{margin: 50px;}
      #box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;}
      #box .active{background: red;}
      #content{clear: both;}
      #content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;}
    </style>
  </head>
  <body>
    <div >
      <!--thisulMenu for tabs，Provide options，And set one of themliAs the default style-->
      <ul>
        <li class="active">news</li>
        <li>society</li>
        <li>science and technology</li>
        <li>entertainment</li>
      </ul>
      <!--thisdivContents of the tab，Show different contents of different menus，And set one of themdivFor visible，Other hidden-->
      <div >
        <div style="display: block;">news</div>
        <div>society</div>
        <div>science and technology</div>
        <div>entertainment</div>
      </div>
    </div>
  </body>
</html>

The principle of making a tab is: there are several options and a corresponding number of content. When one of the options is operated, the corresponding content will be displayed, and the other content will not be displayed. Therefore, when laying out the page, we first set a special style for an option and display its corresponding content. The other option styles remain unchanged and the corresponding content is hidden. When operating options, change the class name of the option to a special style class name and display the corresponding content.

<script type="text/javascript">
  =function(){
    var oBox=('box');
    var aLi=('li');
    var oCon=('content');
    var aDiv=('div');

    for(var i=0;i<;i++){
      aLi[i].index=i;  //Add the corresponding index for each li      aLi[i].onclick=function(){  //Loop add onclick event for each li      for(var i=0;i<;i++){
        aLi[i].className=''; //Loop clear the li style        aDiv[i].='none'; // Loop to hide all divs      }
      ='active'; //The current clicked element style becomes active      aDiv[].='block';  // Get the index corresponding to the current li      }
    }
  }
</script>

Today I encountered a very low-level error when doing tab effects, but I couldn't find the reason for it for a while, as follows:
This is the menu of the tabs I have laid out. It looks very simple. One ul contains 3 li, one of which is |, so there are only two menu items that can be clicked, so there is no problem.

<ul >
  <li class="active"><a href="javascript:" rel="external nofollow" rel="external nofollow" >Essential software</a></li>
  <li >|</li>
  <li><a href="javascript:" rel="external nofollow" rel="external nofollow" >Common software</a></li>
</ul>

I won't read the content, and then I started writing JS code, getElementById and other balabara. After writing the for loop, I felt that I had finished writing it, and then I ran it. . . The default page is normal, click, blank. ? ? ? ? ? What's going on? F12, aLink[i] is undefined; add one, detect the obtained aLi, aLink, which has a value and can be obtained, yes. Then the following loop detects aLink[i], undefined, what is this? I spent nearly an hour working on the JS code, changing the method of obtaining variable names... and various methods have no effect. Unexpectedly, when re-detecting aLi, it was found that the length was 3. . I was stunned. The length of aLink is 2, so there must be one that cannot be found. Quickly change the second li to span and it will be successful. Evil ||||||||||. I can only say that my knowledge is not enough, and I have to keep working hard! ! !

var oBox=('box');
var oNav=('nav');
var aLi=('li');
var oCon=('con');
var aLink=('hide');

for(var i=0;i<;i++){
  aLi[i].index=i; //Add the corresponding index for each li  aLi[i].onclick=function(){ //Loop add onclick event for each li    for(var i=0;i<;i++){
      aLi[i].className=''; //Loop clear the li style      aLink[i].='none'; // Loop to hide all divs    }
    ='active'; //The current clicked element style becomes active    aLink[].='block'; // Get the index corresponding to the current li  }
}

The above is a detailed explanation and integration of the effects of JS tabs introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!