美文网首页Web 前端开发 让前端飞
tab切换-点击跳转相应tab

tab切换-点击跳转相应tab

作者: 砚婉儿 | 来源:发表于2017-03-30 13:50 被阅读0次

    css代码:

    .nav li{float:left;display: block;padding: 20px;}
    #tab{overflow:hidden;zoom:1;}
    #tab li{float:left;display: block;padding: 20px;}
    #tab li.cur{background:#ccc;}
    #content{padding: 20px;background: #eee;}
    #content ul{display: none;}
    

    html代码:

    <!-- nav导航 -->
    <div class="nav">
        <ul id="nav-a">
            <li><a href="#tab-01">nav01</a></li>
            <li><a href="#tab-02">nav02</a></li>
            <li><a href="#tab-03">nav03</a></li>
        </ul>
    </div>
    
    <!-- tab标签 -->
    <div>
        <ul id="tab">
            <li class="cur"><a href="#tab-01">01</a></li>
            <li><a href="#tab-02">02</a></li>
            <li><a href="#tab-03">03</a></li>
        </ul>
        <div id="content">
            <ul style="display:block;">
               <a href="#">01</a>
            </ul>
            <ul>
                <a href="#">02</a>
            </ul>
            <ul>
               <a href="#">03</a>
            </ul>
        </div>
    </div>
    

    js代码:

    $(function(){
        var str = window.location.hash;  //获取当前页面的url地址的锚部分(从#号开始的部分)
        var idx = str.charAt(str.length - 1);  //获取最后一个字符
        $("#tab li").eq(idx-1).trigger("click");  //tab标签里相应位置出发点击事件
    });
    //点击tab标签
    $("#tab li").click(function(){
        $(this).addClass("cur").siblings().removeClass();
        $("#content ul").eq($(this).index()).fadeIn(100).siblings().fadeOut(100);
    });
    //点击nav导航
    $("#nav-a a").click(function(){
        var str = this.hash;
        var idx = str.charAt(str.length - 1);
        $("#tab li").eq(idx-1).trigger("click");
    });
    

    …………END…………

    谢谢支持,喜欢就点个❤

    相关文章

      网友评论

        本文标题:tab切换-点击跳转相应tab

        本文链接:https://www.haomeiwen.com/subject/kxvrottx.html