Удаление 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 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. Класс «selected» должен быть удален из опции 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> 

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

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