当我们单击使菜单突出显示时，在<a>元素上添加活动类
当我们单击使菜单突出显示时，在<a>元素上添加活动类
提问于 2013-09-27 01:15:28
在菜单中，当用户点击项目时，我想突出显示类，
我有这样的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>时，我想添加class ="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>上添加类
Stack Overflow用户
发布于 2017-06-04 20:42:05
添加Bootstrap CDN：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>HTML代码
<div class="container">
<ul class="nav nav-tabs">
<li id="parentMenuId"><a href="#parentMenu">Parent Menu</a></li>
<li id="childMenuId"><a href="#childMenu">Child Menu</a></li>
</ul>
<div id="parentMenu">
<center>
<div class="form-group">
<h1>parent menu</h1>
</div>
</center>
</div>
<div id="childMenu">
<center>
<h1>child menu</h1>
</center>
</div>
</div>jQuery代码
$(document).ready(function() {
$("#childMenu").hide();
$("#parentMenuId").addClass("active");
$("#parentMenuId").click(function() {
$("#parentMenu").show();
$("#childMenu").hide();
$("#parentMenuId").addClass("active");
$("#childMenuId").removeClass("active");
});
$("#childMenuId").click(function() {
$("#parentMenu").hide();
$("#childMenu").show();
$("#parentMenuId").removeClass("active");
$("#childMenuId").addClass("active");
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19034503
复制相关文章
相似问题
腾讯云开发者
