...

View Full Version : jquery class change on load



dniwebdesign
12-03-2010, 07:52 PM
I have a navigation list set up as

<ul id="Alpha">
<li id="?"><a href="#alpha" rel="#">#</a></li>
<li id="A"><a href="#alpha" rel="A">A</a></li>
<li id="B"><a href="#alpha" rel="B">B</a></li>
<li id="C"><a href="#alpha" rel="C">C</a></li>
// And so on...

Now... I want to automatically set the class of say B on load to 'currentpage'. I get the current page from the query string via php

<?php if(!empty($_GET["cat"])) {
echo 'highlight = "'.strtoupper($_GET["cat"]).'";';
}
else {
echo 'highlight = "A";';
}
?>
which in turns either put the highlight variable to the value of $_GET['cat'] or by default A if nothing else is specified.

How do I set the class of the link?
I thought something like

$("#Alpha a").attr('rel',highlight).attr('class','currentpage');

but it just highlights everything. Seems like something simple but I can't figure it out and am running out of time. :-)

Fumigator
12-03-2010, 08:47 PM
If you set an ID on each anchor element that matches the $_GET['cat'] value, you can just use an ID selector to make the change.



<li id="A"><a href="#alpha" id="link_A" rel="A">A</a></li>

.
.
.

$("#link_" + highlight)..attr('class','currentpage');


I'm not sure why you're messing with "rel".

SB65
12-03-2010, 11:06 PM
Or even more simply, since you already have the id on the <li>:


$("#" + highlight).addClass('currentpage');

dniwebdesign
12-04-2010, 06:34 AM
Or even more simply, since you already have the id on the <li>:


$("#" + highlight).addClass('currentpage');

This did not work.

SB65
12-04-2010, 09:28 AM
Really? Works for me - adds the class to the li rather than the anchor, perhaps I should have emphasised that. The following would add the class to the anchor:


$("#" + highlight+' a').addClass('currentpage');



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum