SoFunction
Updated on 2025-04-12

Implement the easiest tab switching effect based on javascript

The examples in this article share with you the specific implementation code for the js tab switching effect for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>Zhu Zhu made</title>
<script src="js/" type="text/javascript"></script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  body{
    background-color: #fff;
    font-family: "Microsoft Yahe";
    font-size: 18px;
    width: 1000px;
    margin: 50px auto;
    color:#000000;
  }
  .wrapper{
    width: 350px;
  }
  #nav ul{
    border-bottom: 2px solid yellowgreen;
    height: 32px;
  }
  #nav li{
    display: inline-block;
    border: 2px solid #999;
    border-bottom: none;
    margin-left: 10px;
    width: 65px;
    text-align: center;
    line-height: 30px;
  }
  #nav li:hover{
    cursor: pointer;
  }
  #content{
    display: block;
    border: 1px solid blue;
    border-top: none;
    text-align: center;
    height: 100px;
    line-height: 100px;
  }
  #nav {
    border-bottom: solid 2px #ffffff;
  }
  .hide{
    display: none;
  }
  .show{
    display: block;
  }
</style>
</head>
<script type="text/javascript">
  /*=change; //js code implementation
   function change(){
   =("nav");
   =("li");
   =("content");
   =("div");
   for(var i=0;i<;i++){
     li[i].index=i;
     li[i].onclick=function(){
       for(var i=0;i<;i++){
       li[i].className="";
       divi[i].className="hide";
       }
     li[].className="on";
     divi[].className="show";
     }
   }
 }*/
$(function(){
$('#nav li').each(function(){
  $(this).click(function(){
    $('#nav li').removeClass("on");
    $(this).addClass("on");
    $("#content div").removeClass();
    $("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
&lt;/script&gt;
&lt;body&gt;
  &lt;div class="wrapper"&gt;
    &lt;div &gt;
      &lt;ul&gt;
        &lt;li class="on"&gt;num1&lt;/li&gt;
        &lt;li&gt;num2&lt;/li&gt;
        &lt;li&gt;num3&lt;/li&gt;
        &lt;li&gt;num4&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;div &gt;
      &lt;div class="show"&gt;content1&lt;/div&gt;
      &lt;div class="hide"&gt;content2&lt;/div&gt;
      &lt;div class="hide"&gt;content3&lt;/div&gt;
      &lt;div class="hide"&gt;content4&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

The above is all about this article, I hope it will be helpful to everyone's learning.