0

onMouseOver のときに、3 つの画像リンクに (それぞれ) 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 イベントを 3 つのアンカー タグすべてで使用します。

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

でも、

onMouseOver の場合、3 つすべてが1aを表示します。そして、それだけです。

1a は、他の 2 がロールオーバーされても非表示にならず、2a + 3a はまったく表示されません。

ありがとう

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 に答える