× The internal search function is temporarily non-functional. The current search engine is no longer viable and we are researching alternatives.
As a stop gap measure, we are using Google's custom search engine service.
If you know of an easy to use, open source, search engine ... please contact support@midrange.com.



Hi Mark,

Issue 3b, why not adjust the class in your menu using jQuery. Give
each menu item an id, and then you can easily adjust the class
whenever the page changes.

That's basically what I'm doing, except I've targeted the links using the DOM list array rather than id selectors.

Using id selectors is better if the order of the navigation links has the potential to change. I used the DOM list array because: (1) I intend this particular site to be very static once it is finished, and (2) I wanted to have an example of using the DOM list array that I can refer back to in the future.

Here's how I'm using JQuery to change the color of the links when new page content is loaded:

switch (s) {
case "home.html":
$(".nav-bar li:nth-child(1) a").css("background-color", "#1f8bbc");
break;
case "care.html":
$(".nav-bar li:nth-child(2) a").css("background-color", "#1f8bbc");
break;
case "offer.html":
$(".nav-bar li:nth-child(3) a").css("background-color", "#1f8bbc");
break;
case "turn.html":
$(".nav-bar li:nth-child(4) a").css("background-color", "#1f8bbc");
break;
case "stop.html":
$(".nav-bar li:nth-child(5) a").css("background-color", "#1f8bbc");
break;
case "accept.html":
$(".nav-bar li:nth-child(6) a").css("background-color", "#1f8bbc");
break;
case "dare.html":
$(".nav-bar li:nth-child(7) a").css("background-color", "#1f8bbc");
break;
}

Here's how it would look if I used id selectors instead:

switch (s) {
case "home.html":
$("#home").css("background-color", "#1f8bbc");
break;
case "care.html":
$("#care").css("background-color", "#1f8bbc");
break;
case "offer.html":
$("#offer").css("background-color", "#1f8bbc");
break;
case "turn.html":
$("#turn").css("background-color", "#1f8bbc");
break;
case "stop.html":
$("#stop").css("background-color", "#1f8bbc");
break;
case "accept.html":
$("#accept").css("background-color", "#1f8bbc");
break;
case "dare.html":
$("#dare").css("background-color", "#1f8bbc");
break;
}

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.