我是 HTML/CSS/JS 新手,我正在做一些测试并摆弄一些东西,并决定在该页面上突出显示导航元素。我决定使用 jQuery 来解决这个问题,因为据我所知,这是最简单的解决方案。到目前为止,它工作得很好,但我的问题是,它在加载时没有突出显示主“聊天”页面,因为它只是网址,没有/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;
}
最佳答案
首先,您的路径名包含整个 URL,因此它永远不会与 a 标记中的 href 匹配。您只需要获取页面名称。 接下来,您应该检查 a 标记的 href 属性,而不是 href 本身。 下面的示例使用虚拟链接来帮助演示。由于代码片段,我必须在 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>
关于javascript - jQuery 在加载时突出显示导航项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52694205/