javascript - 为第一段的任何 URL 匹配添加事件类？

Question

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

我希望它检查当前位于 window.location.pathname 中的任何 URL 的第一段，如果第一段匹配，则将事件类添加到导航项。

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

无论基于具有多个段的任何 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

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

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