<div class="container"> 
  
 <ul class="tabs"> 
  <li class="active"><a href="#tab1">導(dǎo)航菜單</a></li> 
  <li><a href="#tab4">TAB標(biāo)簽</a></li> 
 </ul> 
 <div class="tab_container"> 
  <div id="tab1" class="tab_content" style="display: block; "> 
   
  <h3><a >jquery css多級下拉菜單</a></h3> 
  <p id="">多級菜單，理論上支持無限多的層級，文件結(jié)構(gòu)非常簡單的，具體的請看下面的內(nèi)容</p> 
  </div> 
  
  <div id="tab4" class="tab_content" style="display: none; "> 
  <h2>各種tab標(biāo)簽選項卡</h2> 
  <h3><a >tab標(biāo)簽頁面,ajax載入</a></h3> 
   
  <p> tab標(biāo)簽，jquery ajax載入數(shù)據(jù)庫的內(nèi)容</p> 
  </div> 
 </div> 
 
 </div> 

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
 //默認active 
 $(".tab_content").hide(); //隱藏全部的tab菜單內(nèi)容
 $("ul.tabs li:first").addClass("active").show(); //對第一個li標(biāo)簽添加class="active屬性" 
 $(".tab_content:first").show(); //顯示第一個tab內(nèi)容 
 
 //點擊事件 
 $("ul.tabs li").click(function() { 
 $("ul.tabs li").removeClass("active"); //移除class="active"屬性
 $(this).addClass("active"); //添加class="active"到選擇標(biāo)簽中 
 $(".tab_content").hide(); //隱藏全部標(biāo)簽內(nèi)容 
 var activeTab = $(this).find("a").attr("href"); //找到所屬屬性值來識別活躍選項卡和內(nèi)容 
 $(activeTab).fadeIn(); //使內(nèi)容消失 
 return false; 
 }); 
 
}); 
</script>