我的菜单列表包含:
<ul class="content_menu tabs">
<a href="#" name="content_1" class="tab active"><li class="pager_link_0_active"></li></a>
<a href="#" name="content_2" class="tab"> <li class="pager_link_1"></li></a>
<a href="#" name="content_3" class="tab"><li class="pager_link_2"></li></a>
<a href="#" name="content_4" class="tab"><li class="pager_link_3"></li></a>
<a href="#" name="content_5" class="tab"><li class="pager_link_4"></li></a>
<a href="#" name="content_6" class="tab"><li class="pager_link_5"></li></a>
<a href="#" name="content_7" class="tab"><li class="pager_link_6"></li></a>
<a href="#" name="content_8" class="tab"><li class="pager_link_7"></li></a>
<a href="#" name="content_9" class="tab"><li class="pager_link_8"></li></a>
</ul>
我想要做的是点击特定链接时我需要从包含活动的li类名称中移除活动(例如pager_link_0_active)并将click添加到被点击的li(例如pager_link_2_active)
我知道有一种方法可以实现:
$(".active").removeClass("active");
$(this).addClass("active");
但在我的情况下,活动不是分开的,它是类名的一部分。
答案 0 :(得分:1)
根据标准,ul只能包含元素,但您可以通过以下方式获得所需:
$(function () {
$('ul.content_menu.tabs a.tab').click(function () {
var newActive = $(this);
if (newActive.hasClass('active')) {
return;
}
var oldActive = $('ul.content_menu.tabs a.tab.active');
oldActive.removeClass('active');
var oldIndex = $('ul.content_menu.tabs a.tab').index(oldActive);
oldActive.children().attr('class', 'pager_link_' + oldIndex);
var newIndex = $('ul.content_menu.tabs a.tab').index(newActive);
newActive.addClass('active');
newActive.children().attr('class', 'pager_link_' + newIndex + '_active');
});
});
这是fiddle
答案 1 :(得分:0)
最好将它设为一个单独的类<li class="pager_link_1 pager_active">
,然后您可以轻松删除并添加pager_active。
如果LI总是只有一个类,请尝试:
var active_li = $(".active li");
var active_class = active_li.attr("class");
active_li.attr("class", active_attr.replace("_active", "");
var this_li = $(this).children("li");
var this_class = this_li.attr("class");
this_li.attr("class", this_class+"_active");