Question

我正在使用此功能将活动类添加到主导航中的链接：

$(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>

我遇到的问题是，当我最初访问该网站时，所有三个都会突出显示。如果我点击要刷新的徽标，则只会突出显示“主页”链接。有什么方法可以解决这个问题吗？

Answer 1

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

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

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

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

jQuery函数添加活动类突出显示多个链接

1 个答案: