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

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。