Question

我正在尝试添加并激活基于URL的类，但是将活动类添加到所有锚元素

<div class="year-wrapper">
  <a href="/articles/2017" class="year">2017</a>
  <a href="/articles/2016" class="year">2016</a>
  <a href="/articles/2015" class="year">2015</a>
  <a href="/articles/2014" class="year">2014</a>
  <a href="/articles/2013" class="year">2013</a>
</div>

https://codepen.io/anon/pen/vdpPdz

我们说我的网址是http://localhost:49660/articles/2014然后它应该为2014的锚元素添加活动类，同时为所有项添加活动类。尝试了几个不同的例子。

//http://localhost:49660/articles/2014
 $(function () {
    $('.year-wrapper a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
    //$('.year-wrapper a[href^="articles/2014"').addClass('active');

});

.year-wrapper { width:50%; padding:20px; background:#f5f5f5; color:black; margin:10% auto;}
.year{margin:10px; padding:10px; background:green;}
.active{background:yellow;}

我也尝试过：

$('.year-wrapper > a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');

Answer 1

试试这个，

在JS中，

$('.year-wrapper a[href$="'+(location.href.split("/").pop())+'"]').addClass("active");

不要在codepen中尝试，URL更改。但是当我尝试时，这段代码工作并将最后一个改为黄色。请注意$而不是^。

Answer 2

只需使用location.pathname。

当网址为http://localhost:49660/articles/2014时，location.pathname将为/articles/2014，因此$('.year-wrapper a[href^="' + location.pathname + '"]')可以指示2014年的链接。

根据url将活动类添加到锚点

2 个答案: