Question

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

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

适用于家庭，产品和画廊。但是当我在console.log（linkPath）上显示文本样本而不是产品时，它显示了网址产品/样本。因此，没有数学，也不会将活动类添加到当前项目。

如果在任何包含多个细分的网址中的第一个细分匹配基础上，我怎样才能添加活动类？

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

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

为第一段的任何网址匹配添加活动类？

2 个答案: