Javascript jQuery在加载时突出显示导航项

我不熟悉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>

SCSS：

---

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

$（文档）.ready（函数（）
{
//模拟“windows.location.href”上的更改
//===========================================================
var path=[“/index.html”、“/friends.html”、“/settings.html”]；
var idx=Math.floor（Math.random（）*3）+0；
console.log（“随机idx=”+idx）；
//===========================================================
var path=路径[idx]；
//var path=window.location.href；
$（“a”）.removeClass（“活动”）；
$（“a[href=”“+path+”]”）addClass（'active'）；
});
.active{
右边框：10px纯蓝色；
}





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


jQuery（函数（$）{
var path=window.location.pathname；
var page=path.split（“/”）.pop（）；
// 
//下一行用于stackoverflow演示
$（“forDemoOnStackPurpose”）.attr（“href”，第页）；
//
$（'aside nav ul li a'）。每个（函数（）{
if（$（this.attr（“href”）==页面）{
$（this.addClass（'active'）；
}
});
});
.active{
右边框：10px实心红色；
}






您不能简单地从a标记中删除index.html，因为它将解析为正确的地址吗？如果您在另一个页面上，如果没有指定的URL，它是否不能将您带回来？
jQuery(function($) {
    var path = window.location.href; 
    $('aside nav ul li a').each(function() {
    if (this.href === path) {
    $(this).addClass('active');
    }
});

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