javascript - 选择导航项后将类添加到导航项

Question

我的导航设置如下:

<ul class="nav nav-pills">
  <li><a href="/questions/all">All</a></li>
  <li><a href="/questions/popular">Popular</a></li>
  <li><a href="/questions/fun">Fun</a></li>
</ul>

当点击其中一个时，它会映射到我的 Sinatra 路线(即 get '/questions/:filter' do... )。单击其中任何一个都会更新页面，但它们仍然使用相同的 .erb查看。

我试图弄清楚如何将类“active”应用到<li>当前正在查看的导航项。这样，导航项将突出显示，以便用户知道他们所在的 View (无需查看实际的 URL)。

任何帮助将不胜感激。如果需要的话我可以访问 jQuery。

Answer 1

您可以使用window.location.pathname变量来选择 anchor 标记。

$('a[href="' + window.location.pathname + '"]').addClass('active')