It would really help if you could post a link to a test page instead of
posting code excerpts. For example, I don't see any HTML code that has
id="link-about" and your other links. Is that missing from your page, or did
you just omit it in the code you posted? Are the LI elements supposed to be
those links?
In any case, since I can't help you get the code working, at least I can
help you simplify it. Let me assume that those LI elements are your links.
Then I would change them to this:
<ul>
<li class="clicklink" id="link-about"> # About </li>
<li class="clicklink" id="link-work"> # Work </li>
<li class="clicklink" id="link-ramblings"> # Ramblings </li>
<li class="clicklink" id="link-contact"> # Contact </li>
</ul>
and I would change your JavaScript - it's not Java, please :-) to:
$(document).ready( function() {
$('li.clicklink').click( function() {
$('div.content').addClass('hide');
$( '#' + this.id.split('-')[1] ).removeClass('hide');
});
});
If that .content class is also used on other elements in your page, then I
would another classname to your four content targets and change the
$('div.content') to use that classname instead.
-Mike
On Tue, Nov 24, 2009 at 7:20 PM, rorourke <r...@pixelbleed.net> wrote:
>
> 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.
>
>
