我正在制作一个导航栏,并希望在该特定页面上添加活动类
下面的代码不会破坏if语句(显示注释)
<html>
<head>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<a href="a.html" class="nav-item">nav</a>
<a href="b.html" class="nav-item">nav</a>
<p id="z">aaa</p>
<p id="zz"></p>
<script>
var navClass = document.getElementsByClassName("nav-item");
var path = window.location.href;
for (i = 0; i < navClass.length; i++) {
//my issue
if (navClass[i] === path) {
navClass[i].classList.add("active");
}
}
//for testing
var xx = navClass[0];//.getAttribute("herf");
document.getElementById("zz").innerHTML = xx + "<br>" + path;
</script>
</body>
</html>
最佳答案
您正在使用的变量的格式与代码所暗示的格式略有不同。
如果打开控制台并访问window.location.href变量,则会看到该变量包含完整的有效URL,而不是导航中链接所遵循的相对格式,因此,每次的绝对测试(===)都会失败,因为它们将永远不平等。
https://stackoverflow.com/questions/54508836/if-statement-not-working-with-classlist-add
不等于
if-statement-not-working-with-classlist-add
您可以通过将导航链接设置为绝对来解决问题,但这将给您带来更多问题。
如果您将测试从比较两者更改为在path变量中查找导航的href,则您的代码将起作用。此外,您需要针对对象的href属性(而不是对象本身)进行测试。
更改:
if (navClass[i] === path) {
至:
if (path.includes(navClass[i].href)) {
编辑:忘记添加.href属性到建议的更改