Jquery добавить выбранный класс Li

Question

Привет я следующий ul li, которые отображают категории имя:

<ul> 
<li class="selected" data-tab-id="0"></li> 
<li data-tab-id="12">...</li> 
<li data-tab-id="3">...</li> 
<li data-tab-id="15">...</li> 
<li data-tab-id="7">...</li> 
</ul> 

В JavaScript скрипты как последуйте:

<script type="text/javascript"> 
var cat_id = '<?=$this->catid?>' 

$(document).ready(function() { 

}); 
</script> 

В настоящее время страница в индексе, так первый li data-tab-id="0" будут выбраны класс также var cat_id ничего не вернет. Теперь, когда пользователь перейдет на другую вкладку, такую ​​как data-tab-id="12", var cat_id будет возвращать значение 12, как я могу удалить класс, выбранный из li по умолчанию, и заменить его на data-tab-id="12". Благодаря

Answer 1

addClass() использование и removeClass() для добавления и удаления класса соответственно. попробовать это

обновленный

var cat_id = '<?=$this->catid?>'; 
$('li').removeClass('selected'); 
$('li').each(function(){ 
    if($(this).attr('data-tab-id')==cat_id){ 
    $(this).addClass('selected'); 
    } 
}) 

обновленный без использования цикла ..

var cat_id = '<?=$this->catid?>'; 
$('li').removeClass('selected'); 
$('li[data-tab-id='+cat_id+']').addClass('selected'); 

fiddle here

updated fiddle

Answer 2

использовать этот образец

$('ul li').click(function() { 
    $('ul li.selected').removeClass('selected'); 
    $(this).closest('li').addClass('selected'); 
}) 

Answer 3

Предполагая list как идентификатор UL - только чтобы избежать проблем в случае, если у вас есть несколько UL вокруг страницы:

$("ul#list") 
    .find(".selected").removeClass("selected") 
    .end() 
    .find("[data-tab-id=" + cat_id + "]").addClass("selected"); 

Вы также можете сделать это в два JQuery называет, конечно:

$("ul#list .selected").removeClass("selected"); 
$("ul#list [data-tab-id=" + cat_id + "]").addClass("selected");