Jquery 将活动类添加到主菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14607480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Add active class to main menu
提问by Vin_fugen
I'm trying to add dynamic active class to my main menu, but i can't able to achieve this,
我正在尝试将动态活动类添加到我的主菜单，但我无法实现这一点，
My jquery is,
我的jQuery是，
<script type="text/javascript">
$(document).ready(function() {
$('#navi a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
</script>
My main menu is,
我的主菜单是，
<ul id="navi">
<li><a href="#">About MHG</a></li>
<li><a href="#">Workout Programs</a></li>
<li><a href="#">Fitness Tips</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Read Our Blog</a></li>
</ul>
回答by krizna
Try this
尝试这个
<ul id="navi">
<li><a class="menu" href="#">About MHG</a></li>
<li><a class="menu" href="#">Workout Programs</a></li>
<li><a class="menu" href="#">Fitness Tips</a></li>
<li><a class="menu" href="#">Contact Us</a></li>
<li><a class="menu" href="#">Read Our Blog</a></li>
</ul>
jquery
查询
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$(this).addClass("active");
});
check this Fiddle http://jsfiddle.net/9nd4j/1/
检查这个小提琴http://jsfiddle.net/9nd4j/1/
回答by abhijit
^^ same as above comment by Rory!!
^^ 与 Rory 的上述评论相同！！
, if you still need you can do
，如果你仍然需要你可以做
$("#navi a").live("click", function(){
$("#navi a").removeClass("active");
$(this).addClass("active")
});
If you have all the links pointing to a same page above solution works, as i see you going to traverse from one page to another this wont work.
如果您的所有链接都指向上述解决方案的同一页面，那么我看到您将从一个页面遍历到另一个页面，这将不起作用。
Thanks
谢谢
回答by Jehanzeb.Malik
Your description is not very clear. By active if you mean the list-item you are hovering on then it should be something like this:
你的描述不是很清楚。如果您的意思是悬停在列表项上，那么它应该是这样的：
$('a.menu').hover(
function () {
$(this).addClass("active");
},
function () {
$('a.menu').removeClass("active");
});
回答by Penny Liu
This method will check the page URL that the user is visiting, then add the active class in <li>tag.
此方法将检查用户正在访问的页面 URL，然后在<li>标签中添加活动类。
HTML
HTML
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="member.php">Member</a></li>
<li><a href="project.php">Project</a></li>
<li><a href="activity.php">Activity</a></li>
</ul>
</div>
JS
JS
var setActive = function () {
// Get the last item in the path (e.g. index.php)
let url = window.location.pathname.split('/').pop();
// Add active nav class based on url
$("#nav ul li a").each(function () {
if ($(this).attr("href") == url || $(this).attr("href") == '') {
$(this).closest('li').addClass("active");
}
})
// Add the active class into Home if user omit index.php from url
if (url == '') {
$("#nav ul li").eq(0).addClass("active");
}
};
$(function () {
setActive();
});
