javascript onmouseover 3个独立div的可见性切换

Question

我想在onMouseOver上有三个图像链接显示三个独立的div（分别）。

<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="1"){
    document.getElementById("1b").style.visibility = "visible";
    document.getElementById("2b").style.visibility = "hidden";
    document.getElementById("3b").style.visibility = "hidden";
}
else if (divid="2")
{
    document.getElementById("1b").style.visibility = "hidden";
    document.getElementById("2b").style.visibility = "visible";
    document.getElementById("3b").style.visibility = "hidden";
}
else if (divid="3")
{
    document.getElementById("1b").style.visibility = "hidden";
    document.getElementById("2b").style.visibility = "hidden";
    document.getElementById("3b").style.visibility = "visible";
}
}
</script>

在所有三个锚标签上使用这些onMouseOver事件。

onmouseover="toggleVisibility('1');"
onmouseover="toggleVisibility('2');"
onmouseover="toggleVisibility('3');"

然而，

所有3，当onMouseOver时，显示1a 。 这就是它的全部。

当其他2个被翻转并且2a + 3a完全没有显示时，1a不会被隐藏。

谢谢

HTML + CSS：

<div id="wrapper">
<div style="width:910px;height:300px;margin:0;padding:0;">
<div id="1b">&nbsp;</div>
<div id="2b">&nbsp;</div>
<div id="3b">&nbsp;</div>
<a href="#" onmouseover="toggleVisibility('1');" class="1"></a>
<a href="#" onmouseover="toggleVisibility('2');" class="2"></a>
<a href="#" onmouseover="toggleVisibility('3');" class="3"></a>
</div>
</div>

#wrapper {
width: 896px;
margin: 0px auto;
text-align: left;
overflow: hidden;
}

#1b {
width:303px;
height:150px;
visibility:hidden;
float:left;
background-color:#DED6C5;
}

.1 {
float:left;
height:130px;
width:303px;
display:block;
background-image:url('images/organizational.jpg');
}

我将这篇文章中的名字修改为“1,2,3,1b，2b，3b”来清理它并且更容易理解。

其他人的CSS与1和1b相同，只是名称已更改。

Answer 1

你的错误是你的错。

使用if ，有效运算符为|| && == === < > <= >=但使用的是= 。

尝试使用==它应该工作。

编辑：

Anthony Hessler为您的代码添加了一个很好的优化，你应该检查出来！

Answer 2

除了关于正确条件格式的答案之外，我建议更新您的可见性切换功能以减少重复代码的数量，这样可以在需要时更容易添加更多潜水。 像这样的东西对你来说应该很好用，因为它遍历你拥有的div的数量，并进行1次条件检查以查看传入的数字是否与循环迭代值匹配，并相应地设置可见性。

function toggleVisibility(divid) {
    var i;
    for (i = 1; i < 4; i += 1) {
        if (divid === i) {
            document.getElementById(i + "b").style.visibility = "visible";
        } else {
            document.getElementById(i + "b").style.visibility = "hidden";
        }
    }
}

希望能帮助到你！

Answer 3

如果您可以使用移动div上方的链接（或者使用一些聪明的定位），则可以使用无javascript的解决方案。

示例： http ： //jsfiddle.net/XUwwY/

概念：

.org:hover ~ #orginfo {
     visibility: visible;   
}