将任何 URL 匹配项的活动 Class 添加到第一段？

Question

我的 Javascript 正在将活动 class 添加到所有具有与我的路径变量匹配的段的链接，但不是具有两个在我的导航中的链接。

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

它适用于家庭、产品和画廊。但是当我 console.log(linkPath) 它显示 url products/samples 文本样本而不是产品。因此没有数学运算，它不会将活动 class 添加到当前项目。

我怎样才能让它添加活动的 class 无论基于第一个段匹配在任何 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>

Javascript

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");
    }
});

Answer 1

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

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

Answer 2

这是我用的：

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);
        }
    });
});

将任何 URL 匹配项的活动 Class 添加到第一段？

Add Active Class for any URL match to first segment?

javascript

jquery