JQuery удаление и добавление классов

Question

Я пытаюсь использовать JQuery для добавления / удаления классов как часть функции, которая использует ссылки для переключения между основными элементами содержимого на моем сайте.

Вот мой JavaScript:

$(document).ready(function () {
  var clickHandler = function (link) {
     $('.tab').hide();
     $('#options_' + link.data.id).show();
     $('.selected').removeClass('selected');
     $(this).addClass('selected');
   }

   $('.link1').bind('click', {id:'1'}, clickHandler);
   $('.link2').bind('click', {id:'2'}, clickHandler);
   $('.link3').bind('click', {id:'3'}, clickHandler);
});

Вот HTML-код div-ов, которые я переключаю (эта часть работает):

<div id="options_1" class="tab">
<h3>Your Feed</h3>
<?= $userFeed ?></div>

<div id="options_2" class="tab">
<h3>All Recent Activity</h3>
<?= $feed ?>

</div>
<div id="options_3" class="tab">
<h3>Trends</h3>
Coming Soon!
</div>

А вот HTML-код ссылки в боковой части страницы, которая управляет переключением div. Класс «выбранный» должен быть удален из опции 1 и добавлен к любой другой ссылке, выбранной пользователем, но этого не происходит. Класс вообще не меняется.

<ul id="feedOptions">
<li><a href="#" id="1" class="link1" class="selected">Your Feed</a></li>
<li><a href="#" id="2" class="link2">All Activity</a></li>
<li><a href="#" id="3" class="link3">Trends</a></li>
</ul>

Как я уже говорил выше, я не могу заставить «выбранный» класс измениться вообще. Есть предложения?

Answer 1

У вас есть несколько class атрибутов на одном элементе, вместо этого:

<a href="#" id="1" class="link1" class="selected">Your Feed</a>

Вы должны иметь это (один атрибут, отдельные классы с пробелом):

<a href="#" id="1" class="link1 selected">Your Feed</a>

Answer 2

$('.link1,.link2,.link3').bind('click', function() { $(this).toggleClass('selected'); });