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

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。