javascript - 如果 URL 包含 VALUE 添加类链接 + ROOT

Question

我想根据使用 vanilla JS 的 url 添加一个事件链接到我的导航。

我的导航是这样的:

 <div id="navi">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
 </ul>
</div>

JS 看起来像这样:

function Activelink() {
 link = document.getElementById('navi').getElementsByTagName('a');
 for(i=0; i<link.length; i++) {
    if(document.location.href.indexOf(link[i].href) != -1) {
     link[i].className='active';}
 }}
window.onload = Activelink;

效果很好，尤其是它还向博客链接添加了“事件”类，即使访问了博客文章也是如此。唯一的问题是 <a href="/">Home</a>也永久地获得了“事件”类的分配。有没有办法避免这种情况，使主页链接类仅在主页被访问时才处于“事件”状态？

Answer 1

您可以使用 endsWith 代替 indexOf:

function Activelink() {
 link = document.getElementById('navi').getElementsByTagName('a');
 for(i=0; i<link.length; i++) {
    if(document.location.href.endsWith(link[i].href)) {
     link[i].className='active';}
 }}
window.onload = Activelink;