Question

这是我的JSfiddle：http://jsfiddle.net/sgmkghf4/

我想创建多个级别的标签。在第一个选项卡中，我想添加somme其他选项卡级别，但是当我单击第二级选项卡时，第一级选项卡会关闭。

错误在哪里？

<!--TABS WRAPPER-->
<div class="tabs_wrapper">
<!-- 2nd new tab design START -->
    <div id="new2_tabs">
        <ul>
            <li class="active"><a href="#pending" rel="pending">1</a></li>
            <li><a class="icon" href="#finished" rel="finished">2</a></li>
            <li><a href="#cancelled" rel="cancelled">3</a></li>
        </ul>
    </div>
    <div id="new2_tabs_content" style="padding:0">
        <div id="pending" class="tab_content" style="display: block;">
        <!--SECOND TABS-->
            <div class="tabs_wrapper">
            <!-- 2nd new tab design START -->
                <div id="new2_tabs">
                    <ul>
                        <li class="active"><a href="#otherone" rel="otherone">1.1</a></li>
                        <li><a class="icon" href="#othertwo" rel="othertwo">1.2</a></li>
                        <li><a href="#otherthree" rel="otherthreed">1.3</a></li>
                    </ul>
                </div>                                              
                <div id="new2_tabs_content" style="padding:0">
                    <div id="otherone" class="tab_content" style="display: block;">
                        <p>TEST1</p>
                    </div>
                    <div id="othertwo" class="tab_content">
                        <p>TEST2</p>
                    </div>
                    <div id="otherthree" class="tab_content">
                        <p>TEST3</p>
                    </div>
                </div>
                <!-- 2nd new tab design END -->
            </div>
        <!--SECOND TABS-->
        </div>
        <div id="finished" class="tab_content">
            <p>TEST2</p>
        </div>
        <div id="cancelled" class="tab_content">
            <p>TEST3</p>
        </div>
    </div>
    <!-- 2nd new tab design END -->
</div>

    $(document).ready(function(){
    //  Main function that shows and hides the requested tabs and their content
    var set_tab = function(tab_container_id, tab_id){
        //  Remove class "active" from currently active tab
        $('#' + tab_container_id + ' ul li').removeClass('active');

        //  Now add class "active" to the selected/clicked tab
        $('#' + tab_container_id + ' a[rel="'+tab_id+'"]').parent().addClass("active");

        //  Hide contents for all the tabs.
        //  The '_content' part is merged with tab_container_id and the result
        //  is the content container ID.
        //  For example for the original tabs: tab_container_id + '_content' = original_tabs_content
        $('#' + tab_container_id + '_content .tab_content').hide();

        //  Show the selected tab content
        $('#' + tab_container_id + '_content #' + tab_id).fadeIn();
    }

    //  Function that gets the hash from URL
    var get_hash = function(){
        if (window.location.hash) {
            //  Get the hash from URL
            var url = window.location.hash;

            //  Remove the #
            var current_hash = url.substring(1);

            //  Split the IDs with comma
            var current_hashes = current_hash.split(",");

            //  Loop over the array and activate the tabs if more then one in URL hash
            $.each(current_hashes, function(i, v){
                set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v);
            });
        }
    }

    //  Called when page is first loaded or refreshed
    get_hash();

    //  Looks for changes in the URL hash
    $(window).bind('hashchange', function() {
        get_hash();
    });

    //  Called when we click on the tab itself
    $('.tabs_wrapper ul li').click(function() {
        var tab_id = $(this).children('a').attr('rel');

        //  Update the hash in the url
        window.location.hash = tab_id;

        //  Do nothing when tab is clicked
        return false;
    });
});

你能帮助我吗？

Answer 1

你有非常混乱的标记，但这不起作用的主要原因是你对多个元素（new2_tabs和new2_tabs_content）使用相同的id。

首先，将ID更改为唯一值。然后将类添加到要设置样式的元素，如下所示：

...
<div id="new_tabs" class="tabs">
...
    <div id="new_tabs_content" style="padding:0" class="tabs_content">

在你的css重写规则中使用类而不是id。这是工作demo

创建多个级别的选项卡

1 个答案: