I agree with Choan that you should use addClass and removeClass instead, to
separate style from code. It also allows you to "test" whether a style has
already been applied to an element, crucial in the code I'm about to
suggest. Anyway, here's one solid, tested approach (making sure "priorLink"
is in the right scope):
priorLink = false;
expiredLink = false;
$("#jqtree a").bind("click",function(){
if (($(this).attr("class")!="activeLink")) { // Prevent action when
clicking same link again
if (expiredLink) expiredLink.removeClass("priorLink");
if (priorLink) {
priorLink.removeClass("activeLink").addClass("priorLink");
expiredLink = priorLink;
}
$(this).addClass("activeLink");
priorLink = $(this);
}
});
You'll notice it tests to see that you're not re-clicking on the same link;
without that "if" clause if you click on the same link twice it will remove
the "last-clicked-on" status from the last-clicked-on link. If you WANT this
behavior, then remove the "if" clause.
Now in your style sheet you would put something like:
a.activeLink {
background-color: #CC004E;
}
a.priorLink {
background-color: #DDDDDD;
}
Replacing DDDDDD with the color of your choice. You can also adapt all the
jQuery code so it functions with "css" calls on the fly as well, though as I
said I think this way is better.
Bruce MacKay wrote:
>
> Hello folks,
>
> I'm seeking some help in changing the (in this case) background
> colour of links once they've been clicked.
>
> I have an application that contains many (50-100) links on a
> page. Clicking on any one brings specific content into a neighbouring
> div.
>
> What I want to do is to change the background colour of the most
> recently clicked link so that a user can see at a glance where they
> are in the list.
>
> This has two parts - the changing of the background colour of the
> current link to the highlight colour, and the change of the
> previously highlighted link back to the default.
>
> The first part I can do:
> $("#jqtree
> a").bind("click",function(){$(this).css("background","#CC004E")});
>
> I cannot do the second part. The previous and current links will not
> necessary be adjacent in the list and with so many links on the page,
> I'm wary of doing a global "set-to-default-colour" sweep of all links
> on the page before changing the colour of the most recently clicked link.
>
> I'd appreciate directions to a better way.
>
> Thanks,
>
> Bruce
>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/Swapping-css-of-non-adjacent-link-tags-tf3401358.html#a9475920
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
