下載菜單變量divs顯示在頁面加載

只需要一些幫助，我一直沒能找到答案。我在HTML中有一個下拉菜單，它應該在下拉選擇時顯示與圖像關聯的div。問題是目前，它會在頁面打開時加載每個div，並且只會在進行選擇時隱藏div。如果有意義的話，我希望在實際選擇之前不要顯示任何內容。這是我到目前爲止（爲了問題的簡化）：下載菜單變量divs顯示在頁面加載

<select onchange="toggle_form_element(this)" name="parts" id="parts"> 
    <option value="-">Please choose an image</option> 
    <option value="0">img 1</option> 
    <option value="1">img 2</option> 
    <option value="2">img 3</option> 
</select> 
<span id="dropdown"> 
    <div id="img1">image 1.jpg</div> 
    <div id="img2">image 2.jpg</div> 
    <div id="img3">image 3.jpg</div> 
</span> 

<script type="text/javascript"> 
    function toggle_form_element(select) { 
    var divSelect = select.value; 
    var elements = dropdown.getElementsByTagName("div"); 
     for (var i = 0; i < elements.length; i++) { 
     if (i == divSelect) { 
      elements[i].style.display = "block"; 
     } else { 
      elements[i].style.display = "none"; 
     } 
     } 
    } 
</script>

任何幫助將不勝感激。謝謝！

來源

2015-07-05 Cardgame132

添加到您的風格

<style> 
#dropdown .image 
{ 
    display: none; 
} 
</style>

然後一類添加到您的元素：

<div id="img1" class="image">image 1.jpg</div> 
<div id="img2" class="image">image 2.jpg</div> 
<div id="img3" class="image">image 3.jpg</div>

因此，在一開始的圖像將通過CSS隱藏。

在您的選擇做出選擇後，您的JS會讓其中一個顯示出來。

來源

2015-07-05 18:17:01

打我吧。您可以避免使用'#dropdown div'來代替添加類。 –

我同意，但它是代碼的簡化示例。如果在原始代碼中有其他div，您會得到意想不到的結果。 –

對不起！我應該更清楚一點，Valdimir是對的，代碼被簡化了。將不僅僅是一個圖像顯示;下面還會有一個列表和文本。爲了這個問題，我只是簡化了一些事情。儘管如果我重新命名課程，你的建議仍然完美。非常感謝你的幫助！ – Cardgame132

下載菜單變量divs顯示在頁面加載

回答

相關問題