jquery - 当我们点击使菜单高亮显示时，在 <a> 元素上添加事件类

Question

在菜单中，当用户点击元素时，我想用类突出显示，

我有这样的 html :

<div id="menu_wrapper">
    <ul class="art-hmenu">
        <li id="home"><a href="Home.aspx">Home</a></li>
        <li id="ProjectList"><a href="ProjectList.aspx">Project List</a><ul>
            <li id="ProjectListsub1"><a href="subone.aspx">Sub One</a></li>
            <li id="ProjectListsub2"><a href="subtwo.aspx">Sub Two</a></li>
        </ul>
        </li>
        <li id="ProjectChoices"><a href="">Project Choices</a><ul>
            <li id="ProjectChoicessub1"><a href="StudentChoices.aspx">Student Project Choices</a></li>
            <li id="ProjectChoicessub2"><a href="StaffChoices.aspx">Supervisor Project Choices</a></li>
        </ul>
        </li>
        <li id="ProjectAllocationList"><a href="AllocationList.aspx">Project Allocation List</a></li>
        <li id="SubmitProposal"><a href="">Submit Proposal</a><ul>
            <li id="SubmitProposalsub1"><a href="submit.aspx">New Proposal</a></li>
            <li id="SubmitProposalsub2"><a href="reSubmit.aspx">Re-Submit Proposal</a></li>
        </ul>
        </li>
        <li id="StaffRecords"><a href="StaffRecords.aspx">Staff Records</a><ul>
            <li id="Li1"><a href="addStaff.aspx">Add new Staff</a></li>
        </ul>
        </li>
        <li id="StudentRecords"><a href="StudentRecords.aspx">Student Records</a></li>
    </ul>
</div>

当用户点击 <a> 时我想添加类 ="active"

我累的是这样的:

$(document).ready(function () {
            $(".art-hmenu>ul>li").on("click", "a", function (event) {
                debugger;
                $("#menu_wrapper>ul>li.active").removeClass("active");
                $("#menu_wrapper>ul>li>a.active").removeClass("active");
                $(this).addClass("active");
            });
        });

但我无法在 <a> 上添加类(class)

Answer 1

这是错误的:$(".art-hmenu>ul>li").on(

你应该有 $("ul.art-hmenu>li").on(

在你的 html 中 ul元素有类 .art-hmenu , 所以你想要 ul.art-hmenu .

您可能想像这样简化您的代码:

$(document).ready(function () {
    $("ul.art-hmenu>li").on("click", "a", function (event) {
        debugger;
        $("#menu_wrapper .active").removeClass("active");
        $(this).addClass("active");
    });
});

演示 here

如果您只想将该类添加到第一个 <a> (不是子菜单)考虑 this demo