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

使用此示例

$('ul li').click(function() {
    $('ul li.selected').removeClass('selected');
    $(this).closest('li').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');

fiddle here

updated fiddle

Answer 3

假设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");

Jquery将选定的类添加到li

3 个答案: