jquery实现简单的Tab切换菜单

SOASPX 5323 0
js代码
<script type="text/javascript">  
  
$(document).ready(function() {  
  
    //Default Action  
    $(".tab_content").hide(); //Hide all content  
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab  
    $(".tab_content:first").show(); //Show first tab content  
      
    //On Click Event  
    $("ul.tabs li").click(function() {  
        $("ul.tabs li").removeClass("active"); //Remove any "active" class  
        $(this).addClass("active"); //Add "active" class to selected tab  
        $(".tab_content").hide(); //Hide all tab content  
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content  
        $(activeTab).fadeIn(); //Fade in the active content  
        return false;  
    });  
  
});  
</script>
主要代码
<div class="container">  
      
    <ul class="tabs">  
        <li class="active"><a href="#tab1">导航菜单</a></li>  
        <li><a href="#tab4">TAB标签</a></li>  
    </ul>  
    <div class="tab_container">  
        <div id="tab1" class="tab_content" style="display: block; ">  
             
          <h3><a href="HTTPS://www.soaspx.com/html/76.html">div+css制作导航下拉菜单</a></h3>  
            <p id="">多级菜单,理论上支持无限多的层级,文件结构非常简单的,具体的请看下面的内容</p>  
        </div>  
          
        <div id="tab4" class="tab_content" style="display: none; ">  
            <h2>各种tab标签选项卡</h2>  
            <h3><a href="https://www.soaspx.com/html/62.html">如何在HTML中插入图片</a></h3>  
              
            <p> tab标签,jQuery ajax载入数据库的内容</p>  
        </div>  
    </div>  
  
</div>


发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~