jQuery: 添加 Class Active 到 <a> 当前页面 href

Question

我正在寻找一种方法来向具有当前页面 href 的标签添加活动 class。

假设我在 localhost:3000/收件箱页面上，我需要我的 html 进行更改，将正确的 class 添加到正确的 div ] 与 class 侧边栏。

所以当在“/收件箱”时 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>

这是我试过的，但它不起作用，它破坏了代码：

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

谢谢。如果我不够清楚，请告诉我。

Answer 1

看起来你几乎做对了，只是忘记调用 jQuery 或 $ 的小错误。您还需要连接您的选择器，以便搜索 href 的 value。

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

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

var href = window.location.pathname;

Answer 2

据我了解你的问题，你想将所有 href 为 '/inbox' 的 div 更改为具有 class "active"

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

$(document).ready(function(){

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

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

     }

}

Answer 3

这个怎么样？

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/ 上，您还将添加 class 到指向 /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。（您可能需要按运行使其生效，因为 URL 与第一次加载页面时不同。）

jQuery: 添加 Class Active 到 <a> 当前页面 href

jQuery: Add Class Active to <a> with current page href

html

javascript

jquery

tabs

class