为与第一段匹配的任何 URL 添加活动类

Add Active Class for any URL match to first segment?

本文关键字：任何 URL 添加 活动 一段      更新时间：2023-09-26

我的Javascript正在将活动类添加到所有链接中，其中包含与我的路径变量匹配的一个段，而不是与我的导航上有两个段的链接。

无论检查当前在 window.location.pathname 中的任何 URL 的第一段，如果第一段匹配，我将活动类添加到导航项，我都希望它。

它适用于家庭，产品和画廊。但是当我控制台.log（linkPath）时，它为url产品/示例显示文本示例而不是产品。因此没有数学运算，它不会将活动类添加到当前项。

如何让它添加活动类，无论基于具有多个细分的任何 url 中的第一个段匹配？

.HTML 

<nav class="navbar" role="navigation">
  <h2 class="markup">Main Navigation</h2>
  <div class="collapse navbar-collapse main-nav-list navbar-link-background">
    <ul class="nav navbar-nav">
      <li><a href="http://www.example.com/">Home</a>
      </li>
      <li><a href="http://www.example.com/products">Products</a>
      </li>
      <li><a href="http://www.example.com/gallery">Gallery</a>
      </li>
      <li><a href="http://www.example.com/promotions">Promotions</a>
      </li>
      <li><a href="http://www.example.com/products/samples">Samples</a>
      </li>
    </ul>
  </div>
</nav>

爪哇语 

var url = window.location.pathname.split( '/' ),
path = url[1];
/* Get URL For Setting Active Nav List Item */
$(".navbar-nav").children("li").each(function() {
    var link = $(this).children("a").attr("href"),
        linkPathIndex = link.lastIndexOf("/")+1,
        linkPath = link.substring(linkPathIndex);
    if (linkPath == path) {
        $(this).addClass("active");
    }
});

为什么不直接在链接 href 中检查路径名？ 像这样：

$(".navbar-nav").children("li").each(function() {
    var link = $(this).children("a").attr("href");
    if(link.indexOf(path) > -1){
       $(this).addClass("active");
       return;
    } 
});
这是我

使用的：

this.win.on(events.load, function() {
    var anchors = self.list.prev().find(cache.anchor),
        url = document.URL;
    $.each(anchors, function() {
        var anchor = $(this),
            href = anchor.prop('href');
        if (url.indexOf(href) !== -1) {
            anchor.addClass(classes.active);
        }
    });
});
相关文章：