使用 jQuery 通过自定义 class 生成 <li>

Question

我正在寻找执行以下操作的解决方案：

我在列表中有两个链接：

<ul>
     <li class="1"><a>Option #1</a><li>
     <li class="2"><a>Option #2</a><li>
</ul>

当我点击一个链接的时候，我想让class变成"selected"，比如我点击了"Option #1":

<ul>
     <li class="1 selected"><a>Option #1</a><li>
     <li class="2"><a>Option #2</a><li>
</ul>

jQuery 中的解决方案不是必需的，但我想 jQuery 是执行此操作的正确工具吗？

请帮忙。

Answer 1

你可以这样做：

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

您还需要使用 </li> 而不是 <li> 来关闭 <li> 以使您的 HTML 标记有效。

Answer 2

您可以使用 jQuery addClass and removeClass functions, or if you want to save you some time the toggleClass

Generate <li> with custom class using jQuery