javascript onmouseover 3個獨立div的可見性切換

我試圖讓三個圖像鏈接在onMouseOver時顯示三個獨立的div（分別）。javascript onmouseover 3個獨立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相同，只是名稱已更改。

來源

2013-05-27 noland

對於這個問題，所以很難提供一個答案沒有看到相關的HTML。 – techfoobar

已編輯！@techfoobar – noland

添加onmouseout事件以返回元素的可見性 – Givi

你的錯誤是在你的情況。

當使用if，有效的運營商都||&&=====<><=>=，但使用的是=。

嘗試使用==它應該工作。

編輯：

Anthony Hessler加好優化你的代碼，你應該看看！

來源

2013-05-27 17:05:36

+1我怎麼錯過了！：-0 – techfoobar

我確實想念它，直到我創造了一個小提琴！ –

非常感謝！但是現在他們沒有一個可見。 – noland

除了有關正確的條件格式的答案，我建議更新您的知名度切換功能，以減少重複代碼的數量，這使得更容易添加更多的潛水，如果需要的話。像這樣的東西應該適合你，因爲它循環了你擁有的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-27 17:19:42

沒什麼大不了，但你可以在for：中聲明你的'var i'' for（var i = 1; ...）' –

我知道。這都是個人喜好。我喜歡var塊，而不是在我的所有代碼中亂扔垃圾:-) –

謝謝！好的建議，它確實清理了很多。 – noland

如果您可以忍受移動div上面的鏈接（或者使用一些聰明的定位），可以使用無javascript的解決方案。

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

理念：

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

來源

2013-05-27 17:44:33 Nile

雅我試圖找出這種技術大聲笑。謝謝你們，我會在一分鐘內給你一個機會！ – noland

javascript onmouseover 3個獨立div的可見性切換

回答

相關問題