[英]jQuery: Add Class Active to <a> with current page href
I am looking for a way to add an active class to the tag that has an href of the current page. 我正在寻找一种将活动类添加到具有当前页面的href的标记中的方法。
Say I am on the page localhost:3000/inbox, I need my html to change add the correct class to the correct which are all located in the div with the class sidebar. 说我在localhost:3000 / inbox页面上,我需要我的html更改以将正确的类添加到正确的类中,这些类全部位于带有侧边栏的div中。
So when at "/inbox" jQuery should make my html look like this: 因此,当在“ /收件箱”时,jQuery应该使我的html看起来像这样:
<div class="sidebar">
<a href="/link">
<i class="fa fa-inbox"></i>
<span>A Link</span>
</a>
<a class="active" href="/inbox">
<i class="fa fa-inbox"></i>
<span>Inbox</span>
</a>
</div>
This is what I tried, but it doesn't work, it breaks the code: 这是我尝试过的方法,但是不起作用,它破坏了代码:
var href = $(location).attr('href');
('.sidebar').find('a[href*=href]').addClass("active");
Thank you. 谢谢。 Please let me know if I wasn't clear enough. 如果我不够清楚,请告诉我。
It looks like you're almost doing it right, with the minor mistake of forgetting to call jQuery
or $
. 看起来您几乎做对了,有一个小错误,就是忘记了调用jQuery
或$
。 You also need to concatenate your selector, so that the value of href is searched for. 您还需要串联选择器,以便搜索href的值 。
$('.sidebar').find('a[href*="' + href + '"]').addClass('active');
You probably also need to find just the path name to match your href
values, like so: 您可能还需要找到仅路径名以匹配您的href
值,如下所示:
var href = window.location.pathname;
How about this? 这个怎么样?
var path = window.location.pathname;
$(".sidebar a[href*='"+path+"']").addClass("active");
Please note the '
around the path. 请注意路径周围的'
。 They are there because jQuery cause syntax error if there are unquoted /
in the selector. 它们之所以存在,是因为如果选择器中未加引号/
,则jQuery会导致语法错误。
When I try it on JSFiddle, I get a /
at the end of the path. 当我在JSFiddle上尝试时,在路径的末尾出现/
。 You might want to add that to your links, or you can remove it from the path
variable like this: 您可能希望将其添加到链接中,或者可以将其从path
变量中删除,如下所示:
if(path.charAt(path.length-1) == "/")
path = path.substring(0, path.length - 1);
Then some browsers might not include the leading /
(or at least I think so), so you might want to add it in case it isn't already there: 然后某些浏览器可能不包括前导/
(或至少我认为是这样),因此,如果它尚不存在,您可能需要添加它:
if(path.charAt(0) != "/")
path = "/" + path;
Since you use *=
you might match more than the current page. 由于您使用*=
,因此可能比当前页面更多。 For instance, if you are on /inbox/
you will also add the class to links to /inbox/sub/folder
. 例如,如果您在/inbox/
,则还将类添加到/inbox/sub/folder
链接中。 To avoid this, use =
instead. 为避免这种情况,请改用=
。
Taken together, you would get this: 综上所述,您将获得以下信息:
var path = window.location.pathname;
if(path.charAt(path.length-1) == "/")
path = path.substring(0, path.length - 1);
if(path.charAt(0) != "/")
path = "/" + path;
$(".sidebar a[href='"+path+"']").addClass("active");
Here is a working JSFiddle. 这是一个工作中的JSFiddle。 (You might need to press run to make it work, as the URL is different the first time the page load.) (您可能需要按run才能使它起作用,因为第一次加载页面时URL不同。)
As far as I understand your question you want to change all divs that have a href of '/inbox' to have the class "active" 据我了解您的问题,您想将所有href为'/ inbox'的div更改为“ active”类
Your code should therefore look like this 因此,您的代码应如下所示
$(document).ready(function(){
$(.sidebar a[href=='/inbox']){
$(a[href=='/inbox').addClass('active');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.