1

次の HTML と JavaScript があります。3 つの写真と 3 つのリンクがあります。1 つのリンクをクリックすると、1 つの画像が表示され、他の 2 つは非表示になります。

display: noneCSS に が存在しない場合、これは正常に機能します。しかし、最初は写真が表示されないdisplay: noneようにしたいので、そこに置きました。今、リンクをクリックしても写真が表示されません。何故ですか？

HTML

<div id="content">
  <div id="left">
    <a href="javascript:showImage('img1')">show image1</a>
    <a href="javascript:showImage('img2')">show image2</a>
    <a href="javascript:showImage('img3')">show image3</a>
  </div>

  <div id="right">
     <img id="img1" src="berlin.jpg" height="200px"/>
     <img id="img2" src="london.jpg" height="200px"/>
     <img id="img3" src="madrid.jpg" height="200px"/>
  </div>
</div>

JavaScript

function showImage(id) {
    var images_id = new Array("img1", "img2", "img3");
    for (var i = 0; i < images_id.length; i++) {
        setImageVisible(images_id[i], false);
    }
    setImageVisible(id, true);
}

function setImageVisible(id, visible) {
    var img = document.getElementById(id);
    img.style.display = (visible ? '' : 'none');
}

CSS

#img1, #img2, #img3 {
    display: none;
}
4

1 に答える 1

5

を設定すると、属性にのみ影響します。に設定すると、その属性から削除され、スタイルシートがその で有効になります。elem.style.propertystyle""display:none

block代わりに設定してみてください。

于 2013-03-10T04:39:45.487 に答える