当我们单击使菜单突出显示时，在<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>上添加类
回答 5
Stack Overflow用户
发布于 2013-09-27 01:19:29
这是错误的：$(".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");
});
});演示
如果您只想将该类添加到第一个<a> (而不是子菜单)中，请考虑使用
Stack Overflow用户
发布于 2013-09-27 01:33:17
试试这个脚本:忘记提到这个代码需要放在你的主页上。
$(document).ready(function() {
$('.art-hmenu li').removeClass("active"); // if you want to style the li
$('.art-hmenu li a').removeClass("active"); // if you want to style a specific a
var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");
///// Apply active class to selected page link
$('.art-hmenu a').each(function () {
if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
$(this).addClass('activ');// // if you want to style a specific a
$(this).closest('li').addClass('active');// if you want to style the li
});
});Stack Overflow用户
发布于 2013-09-27 01:58:00
我建议的方法是使用art-hmenu类将一个eventlistener添加到ul中，并监听所有锚标记上的click事件，然后在art-hmenu类的ul中查找任何class为active的元素，并删除该类，然后将active类添加到单击的元素中，如下所示
$(document).ready(function () {
$(".art-hmenu").on("click", "a", function (event) {
$(".art-hmenu .active").removeClass("active");
$(this).addClass("active");
});
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19034503
复制相关文章
相似问题
腾讯云开发者
