Question

It’s a large layout, so I will just post the parts that are linked to the jQuery and HTML (full site at http://www.gronge.com/index3.php). It all works fine, except the About link changes back to .navBarActive in Firebug inspection but does not visually change. I am new to web design, and this has been my first big issue so far.

jQuery

$(document).ready(function() {
    $("li.navBarNormal").click(function () {
        $("li.navBarActive").removeClass("navBarActive").addClass("navBarNormal");
        $(this).removeClass("navBarNormal").addClass("navBarActive");
    })
});

HTML

<ol id="navLinks"> 
    <li id="navLinkAbout" class="liNav fontWhite navBarActive">About</li>
    <li id="navLinkSubscribe" class="liNav fontWhite navBarNormal">Subscribe</li>
    <li id="navLinkNews" class="liNav fontWhite navBarNormal">News</li>
    <li id="navLinkUpdates" class="liNav fontWhite navBarNormal">Updates</li>
    <li id="navLinkContact" class="liNav fontWhite navBarNormal">Contact</li>
</ol>

Answer 1

It’s because you are not setting the event listener on the #navLinkAbout node, as this node does not have a navBarNormal class to start with.

My suggestion is to use a better selector for setting the listener, like #navLinks li.

$(document).ready(function() {
    $("#navLinks li").click(function () {
        $("li.navBarActive").removeClass("navBarActive").addClass("navBarNormal");
        $(this).removeClass("navBarNormal").addClass("navBarActive");
    })
});