[jQuery] Using add/remove class vs. show hide for a swap out section?

[rorourke]

I'm mostly a CSS/HTML guy, so delving into jQuery is a bit more then my
normal task list would contain, but I'm happy to suck up any knowledge that
you may be able to impart.

Here is my scenario:

I have four div's each has a different class in additon to the .content
class (which controls font and link styles for each of them), .about, .
work, .ramblings, .contact. Each of these classes is by default shown. But
I've applied a class of .hide to all the ones after .about, which is the
default shown. What I have seems to work for the first link clicked after
page load, but after that nothing is happening. I would like, whenever a
link is clicked to show that sections div and hide the other three. I never
want more then one section showing. This adding classes business or even
just using the .hide() .show() functions doesn't necessarily work because
the java for the ID has to handle every situation on any given click.

Markup looks like this:

<ul>
<li> # About </li>
<li> # Work </li>
<li> # Ramblings </li>
<li> # Contact </li>
</ul>

<div class="content about">
<p>Yada</p>
</div>

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

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

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

Java looks like this:

 $(document).ready(function() {
   $('#link-about').click(function(){
     $('.about').removeClass("hide");
     $('.work').addClass("hide");
     $('.ramblings').addClass("hide");
     $('.contact').addClass("hide");
   });
   $('#link-work').click(function(){
     $('.work').removeClass("hide");
     $('.about').addClass("hide");
     $('.ramblings').addClass("hide");
     $('.contact').addClass("hide");
   });
   $('#link-ramblings').click(function(){
     $('.about').addClass("hide");
     $('.work').addClass("hide");
     $('.ramblings').addClass("hide");
     $('.contact').addClass("hide");
   });
   $('#link-contact').click(function(){
     $('.about').addClass("hide");
     $('.work').addClass("hide");
     $('.ramblings').addClass("hide");
     $('.contact').removeClass("hide");
   });
});
-- 
View this message in context: 
http://old.nabble.com/Using-add-remove-class-vs.-show-hide-for-a-swap-out-section--tp26506957s27240p26506957.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.