Of Stack

Simplest tab switching based on javascript

  • 2021-07-15 07:57:43
  • OfStack

This article teaches you to use the native js to realize the simplest tab switching effect, the mouse slides, the corresponding hidden part is displayed, and the style changes.
The most concise code, js behavior optimization version, copy and paste can be used. 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript- Implement the easiest tab </title>
<style>
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}      
#tabli{float:left;color:#fff;height:30px;
cursor:pointer;line-height:30px;list-style-type:none;
padding:0 20px;}
#tab li.current{color:#000;background:#ddd;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;
display:none;margin:0 30px;padding:10px 0;}
</style>
</head>
<body>
<div id="outer">
  <ul id="tab">
    <li class="current"> No. 1 1 Lesson </li>
    <li> No. 1 2 Lesson </li>
    <li> No. 1 3 Lesson </li>
  </ul>
  <div id="content">
    <ul style="display:block;">
      <li> Every day 1 A </li>
      <li> Small application </li>
      <li> Improve your </li>
      <li>javascript</li>
      <li> Foundation </li>
    </ul>
    <ul>
      <li> Change the background color of the web page </li>
      <li> Function parametric transmission </li>
      <li> Compilation of highly reusable functions </li>
      <li>126 Effect of selecting all mailboxes </li>
      <li> Loop and traversal operations </li>
      <li> Simple use of debugger </li>
      <li> Composition of typical cycle </li>
      <li>for Cyclic fit if Judge </li>
    </ul>
    <ul>
      <li> Function detailed explanation: Function composition, call, event, pass parameters </li>
      <li> Use of timer: setInterval , setTimeout</li>
      <li> Timer application: Navigation effect of stationmaster station </li>
      <li> Timer application: Autoplay tab </li>
      <li> Timer application: Digital clock </li>
      <li> Program debugging method </li>
    </ul>
  </div>
</div>
<script type="text/javascript">
(function(){
    var $ = function(id){
      return document.getElementById(id);
    }
    // Get the corresponding dom Node 
    var myli = $("tab").getElementsByTagName("li");
    var myul = $("content").getElementsByTagName("ul");
    // Loop, so that each small tab corresponds to the corresponding ul Corresponding display, not corresponding hide 
    for(var i=0;i<myli.length;i++){
      myli[i].index = i; // Get the corresponding subscript 
      myli[i].onmouseover=function(){
        // Loop to display the ul Object of the mouse-over event when the subscript is equal to the li The style changes when the 
        for(var n=0;n<myli.length;n++){
          myli[n].className ="";
          myul[n].style.display="none";
          this.className="current";
          myul[this.index].style.display="block";
        }
      }

    }
})()

</script>
</body>
</html>
Related articles: