加载时 jQuery 突出显示导航项答案

【问题标题】：jQuery Highlight Nav Item on Load加载时 jQuery 突出显示导航项
【发布时间】：2019-03-12 15:34:13
【问题描述】：

我是 HTML/CSS/JS 的新手，我正在做一些测试和摆弄一些东西，并决定在该页面上突出显示一个 nav 元素。我决定为此使用 jQuery，因为从我读到的内容来看，它是最简单的解决方案。到目前为止效果很好，但我的问题是它没有突出显示加载时的主“聊天”页面，因为它只是 url，没有 /index.html。对于如何让它在加载时将活动类添加到 index.html 元素的任何帮助，我将不胜感激。

HTML：

 <aside>
        <nav>
            <ul>
                <li><a href="/index.html">Chat</a></li>
                <li><a href="/friends.html">Friends</a></li>
                <li><a href="/settings.html">Settings</a></li>
            </ul>
        </nav>
    </aside>

JQuery:

jQuery(function($) {
    var path = window.location.href; 
    $('aside nav ul li a').each(function() {
    if (this.href === path) {
    $(this).addClass('active');
    }
});

SCSS：

  .active {
        border-right: 10px solid $accent-two;                                 
  }

【问题讨论】：

你不能简单地从 a 标签中删除 index.html，因为它会解析到正确的地址吗？
好吧，如果您在另一个页面上，如果它没有指定的 URL，它不会无法将您带回来吗？

标签： javascript jquery html sass nav

【解决方案1】：

我给你一个例子，说明我将如何添加它。请注意，我必须使用一些代码来模拟位置更改，但每次运行示例时，它都会突出显示不同的锚标记。

$(document).ready(function()
{
    // Simulate change on "windows.location.href"
    //===========================================================

    var paths = ["/index.html","/friends.html","/settings.html"];
    var idx = Math.floor(Math.random() * 3) + 0;
    console.log("Random idx = " + idx);

    //===========================================================

    var path = paths[idx];
    //var path = window.location.href;

    $("a").removeClass('active');
    $("a[href='" + path + "']").addClass('active');
});

.active {
    border-right: 10px solid blue;                                 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<aside>
    <nav>
        <ul>
            <li><a href="/index.html">Chat</a></li>
            <li><a href="/friends.html">Friends</a></li>
            <li><a href="/settings.html">Settings</a></li>
        </ul>
    </nav>
</aside>

【讨论】：

【解决方案2】：

首先，您的路径名包含整个 URL，因此它永远不会与您的 a 标签中的 href 匹配。您只需要获取页面名称。接下来，您应该检查 a 标签的 href 属性，而不是 href 本身。下面的示例使用虚拟链接作为演示帮助。由于sn-p，我不得不在JS中添加href。

jQuery(function($) {
  var path = window.location.pathname;
  var page = path.split("/").pop();
  // 
  // The line below is for demo on stackoverflow purposes
  $("#forDemoOnStackPurpose").attr("href", page);
  //
  $('aside nav ul li a').each(function() {
    if ($(this).attr("href") === page) {
      $(this).addClass('active');
    }
  });
});

.active {
  border-right: 10px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
  <nav>
    <ul>
      <li><a id="forDemoOnStackPurpose" href="">This test page</a></li>
      <li><a href="index.html">Chat</a></li>
      <li><a href="friends.html">Friends</a></li>
      <li><a href="settings.html">Settings</a></li>
    </ul>
  </nav>
</aside>

【讨论】：