在< a>上添加活动类当我们点击菜单时突出显示元素 [英] add active class on <a> element when we click on to make menu as highlighted

问题描述

在菜单中，当用户点击项目时，我想用class来高亮显示，

我有这样的html：

 < div id =menu_wrapper> 
< ul class =art-hmenu> 
< li id =home>< a href =Home.aspx>主页< / a>< / li> 
< li id =ProjectList>< a href =ProjectList.aspx>项目列表< / 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 =>项目选择< / a>< ul> 
< li id =ProjectChoicessub1>< a href =StudentChoices.aspx>学生项目选择< / a>< / li> 
< li id =ProjectChoicessub2>< a href =StaffChoices.aspx>主管项目选择< / a>< / li> 
< / ul> 
< / li> 
< li id =ProjectAllocationList>< a href =AllocationList.aspx>项目分配清单< / a>< / li> 
< li id =SubmitProposal>< a href =>提交提案< / a>< ul> 
< li id =SubmitProposalsub1>< a href =submit.aspx>新提案< / a>< / li> 
< li id =SubmitProposalsub2>< a href =reSubmit.aspx>重新提交提案< / a>< / li> 
< / ul> 
< / li> 
< li id =StaffRecords>< a href =StaffRecords.aspx>员工记录< / a>< ul> 
< li id =Li1>< a href =addStaff.aspx>添加新员工< / a>< / li> 
< / ul> 
< / li> 
< li id =StudentRecords>< a href =StudentRecords.aspx>学生记录< / a>< / li> 
< / ul> 
< / div> 
  

当用户点击< a> 我想添加class =active

我累了就是这样：

 < （click，a，function（event）{$（$。$ document $。$（$。$ art $ h $ u $ gt; b $ b调试器; 
 $（＃menu_wrapper> ul> li.active）。removeClass（active）; 
 $（＃menu_wrapper> ul> li> a.active）。 removeClass（active）; 
 $（this）.addClass（active）; 
}）; 
}）; 
  

但我无法在< a>

解决方案

这是错误的： $（。art-hmenu> ul> ; li）。on（

）

您应该有 $（ul.art-hmenu> li） .on（

）

在你的html ul中元素有class .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）; 
}）; 
}）; 
  

演示此处

如果您正在寻找将该类添加到第一个< a> （而不是子菜单）consi 此演示

in menu, when user click on item, i want to hightlight with class,

i have html like this :

<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>

when user click on <a> i want to add class ="active"

what i tired is like this :

$(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");
            });
        });

but i am not able to add class , on <a>

解决方案

This is wrong: $(".art-hmenu>ul>li").on(

You should have $("ul.art-hmenu>li").on(

In your html ul element has class .art-hmenu, so you want to have ul.art-hmenu.

You might want to simplify your code like this:

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

Demo here

If you are looking for just adding that class to the first <a> (not the submenu) consider this demo

这篇关于在&lt; a&gt;上添加活动类当我们点击菜单时突出显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！