CODEWITHSUNDEEP
jqueryhtmlcsstoggle
Cuestisimo
Cuestisimo

Reputation: 13

I want to have an object have one class be active if all but 1st link is clicked, if the 1st link is clicked it should be removed if active

Here's what I want to have happen: When the user clicks a link in "mainNav" the script loads the "subContent" div from the appropriate page and places it in the "mainContent" div on this page. (This part works.)

I want the "wrapper" div to have the class "wrapUp" if the about, portfolio, or contact pages are loaded, but not if home is.

I'm not a programer but I'm trying to learn some javascript and jQuery. I've tried to target the 1st link and have that remove the "wrapUp" class while the others would add it. Please tell me what I'm doing wrong.

<div id="wrapper">
<img src="_images/LogoLG.png" id="logo" />

<div id="mainNav">
<ul> 
<li><a href="home.html" title="home" >HOME</a></li>
<li>»</li>
<li><a href="about.html" title="about">ABOUT</a></li>
<li>»</li>
<li><a href="portfolio.html" title="portfolio">PORTFOLIO</a></li>
<li>»</li>
<li><a href="contact.html" title="contact">CONTACT</a></li>
</ul>
<!-- End Main Nav --></div>

<div id="mainContent">
<!-- End Main Content --></div>
<!-- End Wrapper --></div>



<script>
   $("#mainNav ul a").live("click",function(e) {
    var url = $(this).attr("href") + " #subContent";
    if ($("a").is(":first")) {
        $("#wrapper").removeClass("wrapUp");
        } else {
            $("#wrapper").addClass("wrapUp");}

    $("#mainContent").hide().load(url).fadeIn("6000");
    e.preventDefault();
});

Upvotes: 1

Views: 44

Answers (2)

jbyrd
jbyrd

Reputation: 5595

When you do:

$("a").is(":first")

the "a" selector is selecting any a's on the page, not the a that you've clicked. You probably need to do something like:

$(this).is("a:first-child")

or give the link an id like:

<a href="home.html" title="home" id="home">Home</a>

and then do:

$(this).attr('id') == 'home'

Upvotes: 1

John Strickler
John Strickler

Reputation: 25421

You were almost there. Instead of,

$('a').is(':first')

you should have used

$(this).is(':first');

I cleaned up the rest of the code for you too :) Enjoy.

$('#mainNav ul').delegate('a', 'click', function (e) {

  var url = this.href + '#subContent',
      isFirst = $(this).is(':first');

  $('#wrapper').toggleClass('wrapUp', !isFirst);

  $('#mainContent').hide().load(url).fadeIn(6000);

  e.preventDefault();

});

Upvotes: 1

Related Questions