Any suggestions for how to create this type of Navigatio

Question

If you have some Javascript experience I'd appreciate some help.

I'm having an issue trying top create a tabbed menu that looks like the one referenced in the screenshot below.

Basically, because I need to include a full width horizontal line below the heading tab, I am unable to get the first tab to remove it's active styling once one of the other tabs is removed.

So my question is: how can I separate the first tab from the others with a full length

---

without creating two different menus.

BTW, I am aware this is a confusing explanation and understand that I am probably doing this completely wrong, but that's why I am looking for your help :)

Here is how I am trying to do this so far:

<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

So I made a working model... uses jQuery but not hash tags

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

I think it's easier to add content to, wouldn't need to rearrange the html for each of the elements.