在菜单中,当用户单击项目时,我想突出显示课程,

我有这样的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

最佳答案

这是错误的:$(".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

10-05 21:03
查看更多