javascript - 有关如何创建此类导航的任何建议

Question

如果您有一些 Javascript 经验，我将不胜感激。

我在尝试创建选项卡式菜单时遇到问题，该菜单看起来像下面屏幕截图中引用的菜单。

基本上，因为我需要在标题选项卡下方包含一条全宽水平线，所以一旦其他选项卡中的一个被删除，我就无法获取第一个选项卡来删除它的事件样式。

所以我的问题是:如何在不创建两个不同菜单的情况下将第一个选项卡与其他选项卡完全分开

---

。

顺便说一句，我知道这是一个令人困惑的解释，并且我明白我可能完全错了，但这就是我寻求您帮助的原因:)

到目前为止，这是我尝试这样做的方式:

<script>

$(document).ready(function() {

    /* Tabs Activiation
    ================================================== */

    var tabs = $('.tabs');

    tabs.each(function(i) {

        //Get all tabs
        var tab = $(this).find('> a');
        tab.click(function(e) {

            //Get Location of tab's content
            var contentLocation = $(this).attr('href');

            //Let go if not a hashed one
            if(contentLocation.charAt(0)=="#") {

                e.preventDefault();

                //Make Tab Active
                tab.removeClass('active');
                $(this).addClass('active');

                //Show Tab Content & add active class
                $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

            }
        });
    });
});

</script>
                <!-- Tabs -->
                <nav id="tab-nav" class="grid3">                            
                    <h1 class="tabs">
                        <a class="active" href="#tab1">Tab 1 (H1)</a>
                    </h1>
                </nav>

                <hr />

                <!-- Tabs -->               
                <nav id="tab-nav" class="grid3">                            
                    <div class="tabs">          
                        <a href="#tab2">Tab 2</a>
                        <a href="#tab3">Tab 3</a>
                    </div>      
                </nav>

                <!-- Tab Content -->
                <ul class="tabs-content grid6"> 
                    <li class="active" id="tab1">Tab 1 Content</li> 
                    <li id="tab2">Tab 4 Content</li>
                    <li id="tab3">Tab3 Content</li>
                </ul>

Answer 1

所以我制作了一个工作模型...使用 jQuery 但不使用哈希标签

http://jsfiddle.net/nenvG/31/

我认为添加内容更容易，不需要为每个元素重新排列 html。