javascript - anchor 列表上的jquery单击事件

Question

我已经创建了 anchor 列表。单击链接时，我想将 CSS 类(使用 addClass)添加到我单击的链接。

<ul id = "menu">
        <li id="mnuLectures" runat="server">
            <asp:HyperLink NavigateUrl = "~/Lectures.aspx" Text="Lectures" runat = "server" ID= "hypLectures" />
        </li>
        <li id="mnuBooks" runat="server">
            <asp:HyperLink NavigateUrl = "~/Books.aspx" Text="Books" runat = "server" ID= "hypBooks" />
        </li>
        <li id="mnuArticles" runat="server">
            <asp:HyperLink NavigateUrl = "~/Articles.aspx" Text="Articles" runat = "server" ID= "hypArticles" />
        </li>
        <li id="mnuQA" runat="server">
            <asp:HyperLink NavigateUrl = "~/QuestionAnswers.aspx" Text="Q & A" runat = "server" ID= "hypQA" />
        </li>
    </ul>

和 JQuery，

$(document).ready(function () {
    $('#menu li a').click(function () {

        $(this).addClass('highlight');

    });
});

jquery 代码无法正常工作。我无法将 CSS 类添加到单击的 anchor 。我是不是遗漏了什么或者方法是错误的..请提出建议

Answer 1

在应用到点击的之前，您还必须从第一个选择中删除:

$(document).ready(function () {

    $('#menu li a').click(function (event) {

        $('#menu li a').removeClass('highlight');
        $(this).addClass('highlight');

        event.preventDefault(); // stop default event to stop reloading of page

    });

});