Of Stack

javascript implements tab responsive switching effects

  • 2020-12-10 00:34:25
  • OfStack

This article illustrates the tab responsive toggle effect, using js to dynamically toggle styles. For more, please see the code 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
<title>tab Responsive toggle effect </title> 
<link rel="stylesheet" href="css/tab.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 
<body> 
<!--  Code section begin --> 
<div class="wrap" height="100%"> 
  <div class="tabs" height="20%"> 
    <a href="#" class="active">tab1</a> 
    <a href="#" >tab2</a> 
    <a href="#" >tab3</a> 
  </div>   
  <div class="swiper-container" height="80%"> 
    <div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
      <div class="content-slide contentin" id="contentref1"> 
      tab content 1 
     </div> 
     </div> 
    <div class="swiper-slide"> 
      <div class="content-slide" id="contentref2"> 
       tab content 2 
      </div> 
     </div> 
    <div class="swiper-slide"> 
      <div class="content-slide" id="contentref3"> 
       tab content 3 
      </div> 
     </div> 
   </div> 
  </div> 
</div> 
<script> 
//$("#contentref1").load("CheckRecord1.html"); // Initial load tab1 
$(".tabs a").each(function(index){ 
    // every 1 A packaging a the jquery Objects will execute function The code in  
    //index Is currently executing this function The code of li Correspond at all li The index value of an array  
    // There are the index After the value of, you can find the content area for the current label  
    $(this).click(function(){   
      var liNode = $(this); 
      // Hide the original displayed content area  
      $(".tabs .active").removeClass("active"); 
      // To have a tabin the class The definition of the li remove tabin the class 
      $(".contentin").removeClass("contentin"); 
      // The content area for the current tag is displayed  
      $("div").eq(index).addClass("contentin"); 
      $("div.content-slide:eq(" + index + ")").addClass("contentin"); 
      liNode.addClass("active");  
       
      if (index == 0) { 
        // Load the static completion page  
        //$("#contentref1").load("CheckRecord1.html"); 
      } else if (index == 1) { 
        // Load the dynamic part page  
        //$("#contentref2").load("CheckRecord.jsp"); 
      } else if (index == 2) { 
        // Load remote data (again here 1 Data output by dynamic pages)  
        //$("#contentref1").load("TabData.jsp") 
      } 
    }); 
  }); 
</script> 
<!--  Code section end --> 
</body> 
</html>

tab.css 


body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;} 
.wrap{margin:0 auto 0 auto;} 
.tabs{height:25px;} 
.tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:25px;font-size:16px;text-decoration:none;} 
.tabs a.active{color:#fff;background:#CDC8B1;border-radius:5px 5px 0px 0px;} 
.swiper-container{background:#CDC8B1;height:100%;border-radius:0 0 5px 5px;width:100%;border-top:0;} 
.swiper-slide{height:100%;width:100%;background:none;color:#fff;} 
div.content-slide {padding:40px;display: none;} 
div.contentin {display: block;}

That's all for this article, and I hope it will help you learn javascript programming.

Related articles: