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

Question

I'm trying to have three image links show three separate div's (respectively) when onMouseOver.

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

With these onMouseOver events used on all three anchor tags.

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

HOWEVER,

All 3, when onMouseOver, show 1a . And that is all it does.

1a does not go hidden when the other 2 are rolled over and 2a + 3a do not show at all.

Thanks

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');
}

I modified the names in this post to "1,2,3,1b,2b,3b" to clean it up and be easier to understand.

The CSS for the others is the same as 1 and 1b just with the names changed.

Answer 1

Your error is in your condition.

When using if , valid operator are || && == === < > <= >= but you are using = .

Try using == and it should work.

EDIT :

Anthony Hessler added a good optimisation for your code, you should check it out!

Answer 2

In addition to the answer about the correct conditional formatting, I'd suggest updating your visibility toggle function to reduce the amount of repeated code, which makes it easier to add more dive, should the need arise. Something like this should work quite well for you, as it loops through the number of divs you have, and does 1 conditional check to see if the passed-in number matches the loop iteration value, and sets visibility accordingly.

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

Hope it helps!

Answer 3

It's possible to have a javascript-free solution if you can bear with moving the links above the divs (or with some clever positioning).

Example: http://jsfiddle.net/XUwwY/

Concept:

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