Using JavaScript to dynamically swap show/hide and add active classes to anchor links?

Here is my scenario. I'm am HTML/CSS guy, JavaScript not so much. But this is a JavaScript problem.

I'm building out a new resume site for myself; http://banderdash.net/design/ pardon the typography, I have yet to bring in Typekit and really get the look 'singing'.

In a perfect world, I would have a script that could perform the following:

-Onclick the .mainnav (along the top), would swap the class="active" for the link clicked. It would also swi开发者_运维技巧tch the class="active" in the .subnav, and swap which content block is being shown in the black area. (about, work, ramblings, or contact)

-Onclick the .subnav would do exactly the same thing (switch active class on itself and mainnav and swap the content block).

-Onload all of the content blocks, except ABOUT, would be hidden. I want this so users without JavaScript aren't missing out on the content. Currently I have a class of hide on all of them except About. This is no good for accessibility.

What my script is is doing now:

$(document).ready(function(){
$(".subnav a, .mainnav a").click(function(){
//remove possible hilights
$(".subnav a, .mainnav a").removeClass("active");
//hilight the clicked link
$(this).addClass("active");

//hide possible shown content
$(".content").hide();
//show my content
var myid = $(this).attr("id");
$("#" + myid + "-content").show();
});
});

Here is my mainnav:

<ul class="mainnav">
<li class="first"><a class="active" href="/design">Home</a></li>
<li><a id="nav-about" href="#about">About</a></li>
<li><a id="nav-work" href="#work">Work</a></li>
<li><a id="nav-ramblings" href="#ramblings">Ramblings</a></li>
<li><a id="nav-contact" href="#contact">Contact</a></li>
</ul>

Here is my subnav:

<ul class="subnav">
<li><a id="nav-about" class="active" href="#about">About</a></li>
<li><a id="nav-work" href="#work">Work</a></li>
<li><a id="nav-ramblings" href="#ramblings">Ramblings</a></li>
<li><a id="nav-contact" href="#contact">Contact</a></li>
</ul>

Simplified markup of the content blocks:

<div id="nav-about-content" class="content about">
<p>Yada</p>
</div>

<div id="nav-work-content" class="content work hide">
<p>Yada</p>
</div>

<div id="nav-ramblings-content" class="content ramblings hide">
<p>Yada</p>
</div>

<div id="nav-contact-content" class="content contact hide">
<p>Yada</p>
</div>

As I mentioned I would like to get rid of the hide class I have hard coded in on the content blocks other then about. I would like them to be added back by an onload function. This way they are hidden when JavaScript is enabled, and show when it's not.

Right now everything is working except the active class being swapped for both the subnav link and the mainnav link, when either is clicked. Not sure how to deal with this. Also it doesn't degrade with no JavaScript most of the content is in-accessible. And I have to use the id="nav-about" for both the .mainnav and the .subnav - which is not valid XHTML.

Would hug you (virtually) if you could get me going again. I'm stuck.

---

not sure I fully understand what you're looking for but try replacing your javascript with:

$(document).ready(function(){
    $("div.content:not(.about)").hide();

    $(".subnav a, .mainnav a").click(function(){
        //remove possible hilights
        $(".subnav a, .mainnav a").removeClass("active");

        var href = $(this).attr("href");

        //hilight the clicked link
        $('a[href="'+href+'"]').addClass("active");

        //hide possible shown content
        $(".content").hide();

        //show my content
        $("div.content:has(a[name='" + href.replace("#","") + "'])").show();
    });
});

I updated the answer to remove the need for the invalid ids.