0

我的菜单列表包含：

<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）并将活动添加到单击的 li（例如 pager_link_2_active）

我知道有一种方法可以做到：

$(".active").removeClass("active");

$(this).addClass("active");

但在我的情况下， active 不是分开的，它是类名的一部分。

4

2 回答 2

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

这是小提琴

于 2012-08-01T10:28:06.767 回答
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");
于 2012-08-01T10:08:36.413 回答