0

我试图让三个图像链接在 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 相同，只是名称有所更改。

4

3 回答 3

1

你的错误在于你的情况。

使用时if，有效的运算符是|| && == === < > <= >=但您正在使用=。

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

编辑 ：

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

于 2013-05-27T17:05:36.653 回答
1

除了关于正确条件格式的答案之外，我建议更新您的可见性切换功能以减少重复代码的数量，这样可以在需要时更轻松地添加更多潜水。像这样的东西对你来说应该很好用，因为它循环遍历你拥有的 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";
        }
    }
}

希望能帮助到你！

于 2013-05-27T17:19:42.913 回答
0

如果您可以忍受将链接移动到 div 上方（或一些巧妙的定位），则可以有一个无 javascript 的解决方案。

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

概念：

.org:hover ~ #orginfo {
     visibility: visible;   
}
于 2013-05-27T17:44:33.163 回答