2010-02-11 2 views
15

У меня есть 4 привязки, я хочу добавить класс тока к якорю, когда он щелкнут, и удалить класс из других 3 одновременно. Вот мой код. Что я делаю не так?jquery add remove class

if ($("ul#thumb a").hasClass("current") { 
    $("ul#thumb a").removeClass("current"); 
    $(this).addClass("current"); 
}); 

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

<ul id="thumbs"> 
    <li> 
     <!-- intro page navi button --> 
     <a id="t0" class="active" name="t0">The Company</a> 

     <ul class="navi"> 
      <li><a style="display:none"></a></li> 
      <li><a id="t1" name="t1">The Brief</a></li> 
      <li><a id="t2" name="t2">The Solution</a></li> 
      <li><a id="t3" name="t3">The Result</a></li> 
     </ul> 

    </li> 
</ul> 
+0

Как выглядит ваш HTML-код? – Sampson

+0

Что именно не работает? Разве это не удаление класса или не добавление классов? Кроме того, это не похоже на полное количество jQuery. Вам нужно что-то вроде '$ ('ul # thumb a'). Click (function() {...});' wrap. –

+0

@Topher Я изменил свой пост, чтобы показать свой html – mtwallet

ответ

29

С помощью событий делегирования, мы только связать один обработчик для всех событий щелчка. Когда якорь (кроме .current якоря) нажата, мы раздеть .current якорь своего класса, и сделать Clicked якорь новый текущий:

$("#thumbs").on("click", "a:not(.current)", function (event) { 
    $(".current", event.delegateTarget).removeClass("current"); 
    $(this).addClass("current"); 
}); 
+0

+1 - Хороший улов. Я отредактировал сообщение и не видел этого = P –

+0

@Jonathan Я внесла поправки в свой пост, чтобы показать свой html – mtwallet

+0

@Jonathan Sampson, что означает 'e.preventDefault();' означает? +1 кстати – ant

0

Я думаю, что это поможет вам

$("a").click(function() { 
    $('a').removeClass('current'); 
    var id = $(this).attr('id'); 
    $('#'+id).addClass('current'); 
}); 
+0

Почему вы смешиваете '$' и 'jQuery'? Вы должны выбрать один и придерживаться его. – Lix

+1

Извините, это была ошибка. Вы можете использовать один – Raghvendra