在我的测试网页上，有一个这样的链接:
<a href="default.html?tab=1" id="t1" onclick="switchf('home',this)">HOME</a>
它的样式是这样的:
nav > a {
text-decoration: none;
color: #0000aa;
display: inline-block;
width: 80px;
padding: 0 10px;
}
nav > a:hover {
background-color: #eeeeee;
}
和switchf()(切换字段)是这样的:
function switchf(field,tab) {
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("account").style.display = "none";
document.getElementById("contact").style.display = "none";
document.getElementById("t1").style.backgroundColor = "#dddddd";
document.getElementById("t2").style.backgroundColor = "#dddddd";
document.getElementById("t3").style.backgroundColor = "#dddddd";
document.getElementById("t4").style.backgroundColor = "#dddddd";
document.getElementById(field).style.display = "inline-block";
tab.style.backgroundColor = "#cccccc";
}
该链接基本上充当一个选项卡，以显示不同的内容。还有其他三个类似的。
JavaScript 可以很好地切换选项卡，但是当我在使用 switchf() 后将鼠标悬停在选项卡上时，它不再改变颜色。
我的代码有问题吗？
谢谢。
编辑
我是这样修复的:
首先，我向所有链接添加了 class="tab"，因此它们看起来像这样:
<a href="?tab=1" id="t1" class="tab" onclick="switchf('home',this)">HOME</a><br />
其次，我更改了 javascript，使函数 switchf() 如下所示:
function switchf(field,tab) {
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("account").style.display = "none";
document.getElementById("contact").style.display = "none";
var t = document.getElementsByClassName("tag"); // here is different
for(var i = 0; i < t.length; i++) {
t[i].style.backgroundColor = "#dddddd";
t[i].addEventListener("mouseover");
t[i].addEventListener("mouseout");
}
document.getElementById(field).style.display = "inline-block";
tab.style.backgroundColor = "#cccccc";
}
它奏效了。
最佳答案
内联 CSS 优先于样式表。单击链接后，它将为所有链接设置 background-color 属性，因此当您将鼠标悬停在链接上时，所有链接都不会改变颜色。
比在元素中硬编码样式更好的替代方法是，您可以尝试向链接添加 CSS 类(如 page-active)并根据需要设置这些元素的样式。
另一种避免清除旧类的替代方法是向页面添加类或 ID，并根据需要使用它来隐藏/显示链接。
<style>
nav > a {
display: none;
}
#page-about nav > a#link-home {
display: inline-block;
}
<body id="page-about">
<nav>
<a href="?tab=home" id="link-home">Home</a>
<a href="?tab=about" id="link-about">About</a>
</nav>
</body>
这应该给你一个大概的概念，完善它是给读者的练习。
关于javascript - javascript 会删除事件监听器吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18641285/