在菜单中,当用户单击项目时,我想突出显示课程,
我有这样的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