jQuery 在菜单上添加类 .active
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4866284/
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 class .active on menu
提问by Andrea Turri
I've got a problem.
我有问题。
I want to add the class "active" on item menu when the relative page is on.
当相关页面打开时，我想在项目菜单上添加“活动”类。
the menu is very simple:
菜单非常简单：
<div class="menu">
<ul>
<li><a href="~/link1/">LINK 1</a>
<li><a href="~/link2/">LINK 2</a>
<li><a href="~/link3/">LINK 3</a>
</ul>
</div>
In jQuery I need to check if the url is www.xyz.com/other/link1/
在 jQuery 中，我需要检查 url 是否为 www.xyz.com/other/link1/
if it's this one I would like to add a class one the 'a' element of link1.
如果是这个，我想在link1的'a'元素中添加一个类。
I'm trying many solutions but nothing work.
我正在尝试许多解决方案，但没有任何效果。
回答by Tom Tu
Click herefor a solution in jsFiddle
单击此处获取 jsFiddle 中的解决方案
What you need is you need to get window.location.pathname as mentioned and then create regexp from it and test it against navigation hrefs.
你需要的是你需要获得 window.location.pathname 如上所述，然后从中创建正则表达式并针对导航 hrefs 对其进行测试。
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('.menu a').each(function(){
// and test its normalized href against the url pathname regexp
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
});
});
回答by Pierre Michel Silva Pèrez
An easier way for me was:
对我来说更简单的方法是：
var activeurl = window.location;
$('a[href="'+activeurl+'"]').parent('li').addClass('active');
because my links go to absolute url, but if your links are relative then you can use:
因为我的链接转到绝对网址，但如果您的链接是相对的，那么您可以使用：
window.location**.pathname**
回答by Realto619
Wasim's answer a few posts up from here works as advertised:
瓦西姆的回答从这里开始的几篇文章如宣传的那样：
回答by betty.88
No other "addClass" methods worked for me when adding a class to an 'a' element on menu except this one:
将类添加到菜单上的“a”元素时，没有其他“addClass”方法对我有用，除了这个：
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
This took me four hours to find it.
我花了四个小时才找到它。
回答by Diodeus - James MacFarlane
Get the LI elments, loop through, check the HREF:
获取 LI 元素，循环，检查 HREF：
$('.menu').find('a').each(function() {
if($(this).attr('href').indexOf('www.xyz.com/other/link1/')>0) {
$(this).addClass('active');
}
})
回答by Wazy
Check this outthis WORKS
检查了这一点这WORKS
Html
html
<div class="menu">
<ul>
<li><a href="~/link1/">LINK 1</a>
<li><a href="www.xyz.com/other/link1">LINK 2</a>
<li><a href="~/link3/">LINK 3</a>
</ul>
</div>
Jquery
查询
$(document).ready(function(){
$(".menu ul li a").each(function(){
if($(this).attr("href")=="www.xyz.com/other/link1")
$(this).addClass("active");
})
})
回答by Chi Chan
I am guessing you are trying to mix Asp code and JS code and at some point it's breaking or not excusing the binding calls correctly.
我猜你正在尝试混合 Asp 代码和 JS 代码，并且在某些时候它会破坏或不能正确地解释绑定调用。
Perhaps you can try using a delegate instead. It will cut out the complexity of when to bind the click event.
也许您可以尝试使用委托。它将消除何时绑定点击事件的复杂性。
An example would be:
一个例子是：
$('body').delegate('.menu li','click',function(){
var $li = $(this);
var shouldAddClass = $li.find('a[href^="www.xyz.com/link1"]').length != 0;
if(shouldAddClass){
$li.addClass('active');
}
});
See if that helps, it uses the Attribute Starts With Selectorfrom jQuery.
看看这是否有帮助，它使用来自 jQuery的Attribute Starts With Selector。
Chi
池
回答by princespn
<script type="text/javascript">
jQuery(document).ready(function($) {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$("#navbar li a").each(function() {//alert('dsfgsdgfd');
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass("active");}
});
});
</script>
回答by Marek Tuchalski
Use window.location.pathname and compare it with your links. You can do something like this:
使用 window.location.pathname 并将其与您的链接进行比较。你可以这样做：
$('a[href="~/' + currentSiteVar + '/"').addClass('active');
But first you have to prepare currentSiteVar to put it into selecor.
但首先您必须准备 currentSiteVar 以将其放入 selecor。
回答by Darin Dimitrov
window.location.hrefwill give you the current url (as shown in the browser address). After parsing it and retrieving the relevant part you would compare it with each link href and assign the activeclass to the corresponding link.
window.location.href会给你当前的网址（如浏览器地址所示）。解析并检索相关部分后，您可以将其与每个链接 href 进行比较，并将active类分配给相应的链接。
