Jquery - добавление класса в список при удалении из ранее нажатых

Question

В моем меню, когда кто-то выбирает ссылку, к имени класса добавляется «выбранный», так что позиция фона перепрыгивает, выделяя пункт меню без перезагрузки страницы.Это работает хорошо, однако я не могу удалить класс из элемента после выбора другой ссылки.Я попробовал цикл while, который заморозил мою страницу.Это так близко, как я получил, однако он все еще не выполняет «остальную» часть заявления.С CSS все в порядке, просто не понятно.Заранее спасибо!

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;
        });     
    });

Список

<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-right:0px; important!"><a href="home.php"  class="home"></a></li>
</ul>

Answer 1

Вместо создания следующего выбранного класса:

var css = page + "-selected";

Вы могли бы сделать вещи немного проще и просто использовать .selected

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

Однако , если это невозможно для вас,

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

Пример кода для jsfiddle с использованием второго метода.

Answer 2

Просто замените ваш код следующим:

$(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');

    });
});

Answer 3

Простой способ - удалить класс из всех элементов списка перед применением к текущему элементу:

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

Answer 4

Соответствующая часть из вашего кода:

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

Хотя гораздо проще использовать «выбранный» класс.

Если вы хотите что-то более эффективное, сохраните ссылку на последнюю нажатую ссылку и запустите на ней .removeClass.addClass вместо всех ссылок.