jQuery toggleClass - выделить одну ссылку за раз?

Question

У меня есть список ссылок на странице, когда пользователь щелкает ссылку, я хочу, чтобы она стала выделенной, и в то же время я хочу, чтобы оставшиеся ссылки стали невыделенными. Демонстрация на полпути вниз по http://api.jquery.com/toggleClass/ делает именно то, что я хочу, однако она позволяет выделить сразу несколько ссылок. Кто-нибудь может посоветовать, что мне нужно настроить, чтобы заставить это работать? Большое спасибо.

Answer 1

Я бы предложил использовать что-то вроде:

$('a').click(
function(e){
    e.preventDefault; // don't follow the link
    $('.highlight').removeClass('highlight');
    $(this).addClass('highlight')
});

JS Fiddle demo .

e.preventDefault; останавливает браузер по ссылке. Вы можете или не можете удалить эту строку.

$('.highlight').removeClass('highlight'); выбирает все элементы class -name 'highlight' и удаляет , что class, так что только одна ссылка может иметь этот класс одновременно. .

$(this).addClass('highlight'); просто добавляет имя класса 'highlight' к элементу this (a в этом примере). <ч /> Ссылки:

• e.preventDefault.
• removeClass().
• addClass().

Answer 2

Я использовал следующее решение для дерева навигации с ~ 200 ссылками. Он использует глобальную переменную для хранения селектора предыдущего выбора навигации, который очищается, когда пользователь переходит на другую ссылку:

var oldSelector = $();  // global var

$('a').on(click, 
function(){
    oldSelector.removeClass('selected');
    $(this).addClass("selected");
    oldSelector = currentSelector;
});


// css
.selected {
background-color: lightblue;
}

Я не думаю, что этот метод сильно отличается от производительности, предложенной @David Thomas, но это еще один способ сделать то же самое.

Answer 3

Вот jquery.

$('a').click(
 function(){
  $('a').removeClass('highlight');
  $(this).addClass('highlight'); 
});

Answer 4

В приведенной выше демонстрации вы можете удалить класс подсветки для всех элементов, а затем вызвать toggle на элементе, по которому щелкнули:

 $("p").click(function () {
      $("p").removeClass("highlight");
      $(this).addClass("highlight");
    });