javascript - 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

假设list为 UL 的 ID——只是为了避免在页面周围有多个 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");

Answer 2

使用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');

在这里摆弄

更新的小提琴

Answer 3

使用此示例

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