Jquery - adding class to list while removing from previously clicked

In my menu, when one selects a link, "selected" is appended to the class name so that the background position jumps, highlighting the menu item without reloading the page. This works well, however I cannot seem to remove the class from the element once another link is selected. I tried a while loop, which froze up my page. This is as close as Ive gotten, however its still not executing the "else" part of the statement. The CSS is fine, it just wont clear. Thank you in advance!

Javascript

<script type="text/javascript">
    $(document).ready(function() {      
        $('#navigation li a').click(function(e){                                          
            var toLoad = $(this).attr('href');                      
            var fadeInData = function fadeInData() { $('#content').fadeIn(); }              
            var loadData = function loadData() { $('#content').load(toLoad, fadeInData); }
            $('#content').fadeOut(loadData); 



                var page = $(this).attr('href');        
                var page = page.replace(".php", ""); 
                var css = page + "-selected";
                var parentClass =  $(e.target).closest("a").attr("class");

                if (parentClass != css) { 
                   $(e.target).closest("a").removeClass(page).addClass(css);
                } else
                {

                    $("ul li").removeClass(css).addClass(page);
                }

            return false;
        });     
    });

List

<div id="nav">
<ul id="navigation">
    <li style="padding-left:0px; important!" ><a href="FB.php" class="FB" ></a></li>
    <li><a href="SPECS.php"  class="SPECS"></a></li>
    <li><a href="APPS.php"  class="APPS"></a></li>
    <li><a href="CONTACT.php"  class="CONTACT"></a></li>
    <li style="padding-rig开发者_开发百科ht:0px; important!"><a href="home.php"  class="home"></a></li>
</ul>

---

Instead of doing the following building up your selected class:

var css = page + "-selected";

You could make things a bit easier and just use .selected

$('#navigation li a').removeClass('selected');

However, if that is not possible for you,

$('#navigation li a').each(function(){
  var className = $(this).attr('href').replace('.php', '') + '-selected';
  $(this).removeClass(className);
});

Code example on jsfiddle using the second method.

---

The relevant part from your code:

$(document).ready(function(){
    var links = $('#navigation li a');
    links.click(function(e){
        links.removeClass(page + '-selected').addClass(page);
        $(this).addClass(page + '-selected').removeClass(page);
    }
}

Although it's a lot easier to just use a "selected" class.

If you want something more efficient, store a reference to the last clicked link and run the .removeClass.addClass on that instead of all the links.

---

A simple way would be to remove the class from all the elements in list before applying to the current element :

$(function() {
    $('#navigation ul li a').click(function() {
        $('#navigation ul li a').each(function() {
            $(this).removeClass('selected');
        });
        $(this).addClass('selected');
    });
});

---

Just replace your code with the following:

$(document).ready(function() {
    $('#navigation li a').click(function() {
       $('#content').fadeOut().load($(this).attr('href')).fadeIn();

       $('#navigation ul li a').each(function() {
          $(this).removeClass('selected');
       });
       $(this).addClass('selected');

    });
});