Question

如果我有一个这样的列表，我该如何制作它，以便当我点击其中一个未选择的项目链接时，它会将<ul> <li class="active"><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul>移动到该列表项并将其从旧列表项中删除？

之前：

<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li class="active"><a href="#">item 3</a></li>
</ul>

点击第三个链接后

{{1}}

Answer 1

你应该使用课程。所以：

$('li').click(function() {
    $('li').removeClass('active');
    $(this).addClass('active');
});

另见这篇文章以获得进一步的支持。它关闭li menu needs class of "selected"

Jquery：https://api.jquery.com/addclass/

Answer 2

这很简单。单击<li>后，将该类添加到单击的元素中，并将其从当前具有该元素的元素中删除。

$("ul").on("click", "li", function () {
    $(this).addClass("active").siblings(".active").removeClass("active");
});

在此代码中，当单击<li>时，该元素被赋予active类，然后我们找到当前具有该类的兄弟元素并删除该类。

使用jquery在html列表中移动所选属性

2 个答案: