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

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