javascript是否删除事件侦听器？_Javascript_Html_Css_Events

javascript是否删除事件侦听器？

javascript html css events

javascript是否删除事件侦听器？,javascript,html,css,events,Javascript,Html,Css,Events,在我的测试网页上，有这样一个链接： <a href="default.html?tab=1" id="t1" onclick="switchf('home',this)">HOME</a> 开关F开关场如下所示： nav > a { text-decoration: none; color: #0000aa; display: inline-block; width: 80px; padding: 0 10px; }

在我的测试网页上，有这样一个链接：

<a href="default.html?tab=1" id="t1" onclick="switchf('home',this)">HOME</a>

开关F开关场如下所示：

nav > a {
    text-decoration: none;
    color: #0000aa;
    display: inline-block;
        width: 80px;
    padding: 0 10px;
}
nav > a:hover {
    background-color: #eeeeee;
}

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 />

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优先于样式表。单击链接后，它将为所有链接设置背景色属性，因此当您将鼠标悬停在该链接上时，所有链接都不会更改颜色

与在元素中硬编码样式相比，更好的选择是，您可以尝试在链接中添加CSS类，如page active，并根据需要设置这些元素的样式

<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>

另一种避免清除旧类的方法是向页面添加类或ID，并根据需要使用该类或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>

这应该给你一个大致的想法，这是读者的一个练习。

这与事件侦听器有什么关系？这里没有鼠标事件的侦听器，对吗？只需点击，我的意思是悬停，在css@Jon没有必要编辑您的问题来添加谢谢，问题已经解决了。将答案标记为已接受就足够了。祝你好运，在最新的网络技术中变得更好！要添加到这个答案中，最好创建一个类，在元素被单击时将其添加到元素中，这样您就可以在样式表本身而不是javascript中管理样式。但这不应该只在未悬停的情况下设置background color属性吗？为什么要在鼠标悬停时更改背景色属性？那么您知道是否有办法只为a而不是：hover设置背景色属性吗？@Jon Inline CSS优先于样式表，而不考虑诸如：hover之类的选择器。使用CSS类将特定链接标记为活动链接，并仅使用Javascript从链接中添加/删除该类。如果您查看已编辑的问题，我添加了addEventListenermouseover和addEventListenermouseout，结果成功。不过，我不太清楚这意味着什么