0

在我拥有的测试网页上，有一个如下链接：

<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";
}

它奏效了。

4

1 回答 1

8

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

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

于 2013-09-05T16:18:12.927 回答