jquery Implements Simple Tab Switching Menu Effect

This example shares the implementation code of jquery Tab switch menu for your reference, which is as follows

The main html code for the tab switch:

 <div class="container"> 
  
 <ul class="tabs"> 
  <li class="active"><a href="#tab1"> Navigation menu </a></li> 
  <li><a href="#tab4">TAB Label </a></li> 
 </ul> 
 <div class="tab_container"> 
  <div id="tab1" class="tab_content" style="display: block; "> 
   
  <h3><a href="http://www.freejs.net/article_daohangcaidan_13.html">jquery css Multilevel drop-down menu </a></h3> 
  <p id=""> Multilevel menu, theoretically supporting unlimited levels, file structure is very simple, see below for details </p> 
  </div> 
  
  <div id="tab4" class="tab_content" style="display: none; "> 
  <h2> Various tab Label Tab </h2> 
  <h3><a href="http://www.freejs.net/article_tabbiaoqian_17.html">tab Label Page ,ajax load </a></h3> 
   
  <p> tab Label, jquery ajax Load the contents of the database </p> 
  </div> 
 </div> 
 
 </div> 

jquery code for tab switching:

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
 // default active 
 $(".tab_content").hide(); // Hide All tab Menu Content 
 $("ul.tabs li:first").addClass("active").show(); // For 1 individual li Label Add class="active attribute " 
 $(".tab_content:first").show(); // Show 1 individual tab content  
 
 // Click Event  
 $("ul.tabs li").click(function() { 
 $("ul.tabs li").removeClass("active"); // remove class="active" attribute 
 $(this).addClass("active"); // Add to class="active" To Selection Label  
 $(".tab_content").hide(); // Hide all label contents  
 var activeTab = $(this).find("a").attr("href"); // Find attribute values to identify active tabs and content  
 $(activeTab).fadeIn(); // Make the content disappear  
 return false; 
 }); 
 
}); 
</script>