Question

I am looking for a way to add an active class to the tag that has an href of the current page.

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.

So when at "/inbox" jQuery should make my html look like this:

<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.

Answer 1

看起来你几乎做得不对，忘记拨打jQuery或$这一小错误。您还需要连接选择器，以便搜索href的值。

$('.sidebar').find('a[href*="' + href + '"]').addClass('active');

您可能还需要找到与href值匹配的路径名称，如下所示：

var href = window.location.pathname;

Answer 2

这个怎么样？

var path = window.location.pathname;
$(".sidebar a[href*='"+path+"']").addClass("active");

请注意路径周围的'。他们在那里是因为如果选择器中有不带引号的/，jQuery会导致语法错误。

当我在JSFiddle上尝试时，我在路径的末尾得到一个/。您可能希望将其添加到链接中，或者可以将其从path变量中删除，如下所示：

if(path.charAt(path.length-1) == "/")
    path = path.substring(0, path.length - 1);

然后某些浏览器可能不包含前导/（或者至少我认为是这样），所以你可能想要添加它以防它不存在：

if(path.charAt(0) != "/")
    path = "/" + path;

由于您使用*=，因此您可能会比当前页面匹配更多。例如，如果您在/inbox/，则还会将该类添加到/inbox/sub/folder的链接。为避免这种情况，请改用=。

总而言之，你会得到这个：

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是一个有效的JSFiddle。（您可能需要按run才能使其正常工作，因为第一次加载页面时URL会有所不同。）

Answer 3

据我了解您的问题，您想要更改所有具有“/ inbox”href的div，以使该类具有“活动”

因此，您的代码应如下所示

$(document).ready(function(){

     $(.sidebar a[href=='/inbox']){

         $(a[href=='/inbox').addClass('active');

     }

}

jQuery：将类激活添加到<a> with current page href

3 个答案: