Question

I’ve set up a page to load data via AJAX, utilizing the jQuery .load function.

Upon loading each new file by clicking a link on a tab bar, I’m using jQuery to set the selected tab’s color to yellow. I tried using a .toggleClass function to set the class of a li element to active, so that it would be yellow, but no dice, so I’ve resorted to resetting the CSS each time.

How do eliminate the redundant code, or overhaul the script?

At any rate, here’s the jQuery script. Any assistance would be welcome!

$(document).ready(function () {
    $('a#catalog').click(function() {
        $("#nav ul li a").css("color","white");
        $(this).css("color","yellow");
        $("#content").load("files/catalog.html");   
    });
    $('a#request').click(function() {
        $("#nav ul li a").css("color","white");
        $(this).css("color","yellow");      
        $("#content").load("files/request.html");
    });
    $('a#publisher').click(function() {
        $("#nav ul li a").css("color","white");
        $(this).css("color","yellow");
        $("#content").load("files/publisher.html");
      });
    $('a#incoming').click(function() {
        $("#nav ul li a").css("color","white");
        $(this).css("color","yellow");
        $("#content").load("files/incoming.html");
    });
    $('a#finished').click(function() {
        $("#nav ul li a").css("color","white");
        $(this).css("color","yellow");
        $("#content").load("files/finished.html");
    });
    $('a#shipments').click(function() {
        $("#nav ul li a").css("color","white");
        $(this).css("color","yellow");
        $("#content").load("files/shipments.html");
    });
});

And the navigation bar:

<div class="bar" id="nav">
            <ul class="left">
                <li><a href="#" id="request">Request Search</a></li>
                <li><a href="#" id="catalog">Catalog Search</a></li>        
                <li><a href="#" id="publisher">Request from Publisher</a></li>
                <li><a href="#" id="incoming">Catalog Incoming Files</a></li>
                <li><a href="#" id="finished">Send Finished Files</a></li>      
                <li><a href="#" id="shipments">Shipments</a></li>
            </ul>
        </div>

And last, but not least, the CSS:

.bar { margin: 5px 0; position: relative; height: 20px; background-color: #515e6c; }
.bar a { color: #fff; }
.bar ul li a:hover { color: yellow; }
/* .bar ul li.active { color: yellow; } */
ul { margin: .3em 0; }
ul li { display: inline; padding: 0 5px; border-right: 1px solid #fff; }
ul li:last-child { border-right: none; }

Thanks in advance!

Answer 1

This should do it:

$(document).ready(function () {
    var $links = $('#nav ul li a');
    $links.click(function() {
        $links.css("color","white");
        $(this).css("color","yellow");
        $("#content").load("files/" + $(this).attr('id') + ".html");       
    });
});

As far as your selected rule, change it to this:

.bar ul li a.active { color: yellow; }

And then you can change the first two lines of the click function to this:

$links.removeClass('active');
$(this).addClass('active');

The style was originally being applied to the <li> itself instead of the <a>.