Hi Brad and Mark,

After I finally understood what you were saying about changing the color of links in the navigation bar, here is what I'm doing now.

In the index.html file:
<ul class="clearfix nav-bar">
<li><a class="menuItem" href="javascript:c_html('home.html');">Home</a></li>
<li><a class="menuItem" href="javascript:c_html('care.html');">Care</a></li>
<li><a class="menuItem" href="javascript:c_html('offer.html');">Offer</a></li>
<li><a class="menuItem" href="javascript:c_html('turn.html');">Turn</a></li>
<li><a class="menuItem" href="javascript:c_html('stop.html');">Stop</a></li>
<li><a class="menuItem" href="javascript:c_html('accept.html');">Accept</a></li>
<li><a class="menuItem" href="javascript:c_html('dare.html');">Dare</a></li>
</ul>

In the CSS style sheet:
.notClickedItem {
background-color: rgba(0,0,0,0.2);
}
.clickedItem {
background-color: #1f8bbc;
}

In the JavaScript script:
$(".menuItem").click(function () {
$(".menuItem").removeClass("clickedItem").addClass("notClickedItem");
$(this).removeClass("notClickedItem").addClass("clickedItem");
});

I could not get the switchClass method to work. I think it might have something to do with switchClass belonging to JQueryUI, whereas I'm only using JQuery. I don't know enough about JQuery and JQueryUI to be certain about that. Nevertheless, I was able to use the addClass and removeClass methods to achieve the same outcome.

This is a much more elegant and maintainable solution than what I had. Now I can switch the order of the links around, add links, delete links, and have everything work without changing the JavaScript.

Thanks to both of you for the tip.

Thanks,
Kelly



As an Amazon Associate we earn from qualifying purchases.

This thread ...

Follow-Ups:

Follow On AppleNews
Return to Archive home page | Return to MIDRANGE.COM home page

This mailing list archive is Copyright 1997-2024 by midrange.com and David Gibbs as a compilation work. Use of the archive is restricted to research of a business or technical nature. Any other uses are prohibited. Full details are available on our policy page. If you have questions about this, please contact [javascript protected email address].

Operating expenses for this site are earned using the Amazon Associate program and Google Adsense.