Re: A Responsive Single Page App (SPA) with 3 Issues to Consider

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