jQuery 函数添加活动类高亮多个链接答案

【问题标题】：jQuery function to add active class highlights more than one linkjQuery 函数添加活动类高亮多个链接
【发布时间】：2014-05-17 04:07:15
【问题描述】：

我正在使用这个函数向我的主导航中的链接添加一个活动类：

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

大多数链接指向目录中的 index.php 文件。所以结构是这样设置的：

  <nav class="nav-collapse">
    <ul>
      <li><a href="/index.php" id="nav-home">HOME</a></li>
      <li><a href="/company/index.php" id="nav-company">OUR COMPANY</a></li>
      <li><a href="/services/index.php" id="nav-services">OUR SERVICES</a></li>
      <li><a href="/partners/index.php" id="nav-partners">OUR PARTNERS</a></li>
    </ul>
  </nav>

我遇到的问题是，当我最初访问该站点时，所有三个都突出显示。如果我单击徽标进行刷新，则仅突出显示“主页”链接。有什么办法解决这个问题？

【问题讨论】：

标签： jquery navigation

【解决方案1】：

我猜测初始加载，位置路径没有值，所以给它一个默认值：

var path = location.pathname.split("/")[1];

if (path == "") path = "index.php";

$('nav a[href^="/' + path + '"]').addClass('active');

【讨论】：

我认为是这样的。谢谢！