Div的能見度與javascript - 問題

我想用div來在我的頁面上顯示內容。這由選擇菜單中的onchange元素控制。它完美的工作，但問題是我想要一個div關閉，當另一個打開。該div的開放罰款，但它並沒有關閉其他人。下面是一個示例代碼。我究竟做錯了什麼？Div的能見度與javascript - 問題

的JavaScript：

if(document.getElementById('catgry').value == '01'){ 
    document.getElementById('post04').style.visibility = "visible"; 
    document.getElementById('post04').style.display = ""; 

    document.getElementById('post07').style.visibility = "hidden"; 
    document.getElementById('post07').style.display = "none"; 
}else if(document.getElementById('catgry').value == '02'){ 
    document.getElementById('post02').style.visibility = "visible"; 
    document.getElementById('post02').style.display = ""; 

    document.getElementById('post04').style.visibility = "hidden"; 
    document.getElementById('post04').style.display = "none"; 

    document.getElementById('post07').style.visibility = "hidden"; 
    document.getElementById('post07').style.display = "none"; 
}

HTML：

<div id="post04" style="visibility:hidden; display:none;"> 
    <table class="posttb"><tr> 
    <td width="30%">Author</td> 
    <td><input type="text" name="author" size="30" class="postfd"></td> 
    </tr> 
</table> 

</div>

來源

2011-01-09 sammville

你可以通過將顯示規則CSS和公正的添加和移除類的div的簡化問題。 – keithjgrant 2011-01-09 01:32:28

@sammville現場演示：http://jsfiddle.net/9Tx7g/ – 2011-01-09 01:33:32

沒有你*不需要使用jQuery。但是你目前的方法效率很低。如果我們對HTML有更全面的瞭解，那麼瞭解最佳方法會更容易。 'post0x`元素是否是兄弟姐妹？如果是這樣，他們的父容器是否有ID？ – user113716 2011-01-09 01:35:11

硬盤，沒有看到您的標記說，但它可能是爲這樣簡單：

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

var posts = document.getElementById('posts').children; 

document.getElementById('catgry').onchange = function() { 
    for(var i = 0, len = posts.length; i < len; i++) { 
     posts[ i ].style.display = (i == this.selectedIndex) ? 'block' : ''; 
    } 
};

例如HTML

<select id='catgry'> 
    <option value='post01'>post 1</option> 
    <option value='post02'>post 2</option> 
    <option value='post03'>post 3</option> 
    <option value='post04'>post 4</option> 
</select> 
<div id='posts'> 
    <div>post 1 content</div> 
    <div>post 2 content</div> 
    <div>post 3 content</div> 
    <div>post 4 content</div> 
</div>

來源

2011-01-09 01:46:41 user113716

考慮使用jQuery和jQuery的手風琴 http://jqueryui.com/demos/accordion/

來源

2011-01-09 01:12:47 Vadim

中安裝jQuery;

將此代碼用作選擇框的html標記。記得指定ID = visibiitySelector和providean屬性「_showelement」每個選項的值，與要顯示，如果選項被選中

<select id="visibilitySelector"> 
    <option value="whatever" _showelement="post01">whatever</option> 
    <option value="whatever" _showelement="post02">whatever</option> 
</select>

拷貝功能到

頁面的JavaScript的div的ID一致

$(document).ready(function(){ 
    $('#visibilitySelector').change(function(){ 
     var showelement = $('#visibilitySelector option:selected').attr('_showelement'); 
     $('div.showhide').not('#' + showelement).hide(); 
     $('#' + showelement).show(); 
    }); 
});

代碼如下的div，記住要提供一流的「顯示隱藏」

<div id="post01" class="showhide"> 
</div> 
<div id="post01" class="showhide"> 
</div> 
<div id="post01" class="showhide"> 
</div>

來源

2011-01-09 01:33:13 Maurizio

你可以用純JavaScript和一些循環做到這一點。

<form method="post" action="#"> 
    <select id="selectMenu"> 
     <option id="option1" value="option 1">option 1</option> 
     <option id="option2" value="option 2">option 2</option> 
     <option id="option3" value="option 3">option 3</option> 
    </select> 
</form> 

<div id="div1" class="postDiv">Div 1</div> 
<div id="div2" class="postDiv">Div 2</div> 
<div id="div3" class="postDiv">Div 3</div> 

<script type="text/javascript"> 
init(); 


function init() 
{ 
    addListeners(); 
} 

function addListeners() 
{ 
    document.getElementById("selectMenu").onchange = selectChange; 
} 

function selectChange(evt) 
{ 
    for(var i=0;i<evt.currentTarget.length;i++) 
    { 
     if(i == evt.currentTarget.selectedIndex) 
     { 
      adjustDivs(i+1, evt.currentTarget.options); 
     } 
    } 
} 

function adjustDivs(optionId, options) 
{ 
    document.getElementById("div" + optionId).style.display = "block"; 
    for(var i=0;i<options.length;i++) 
    { 
     if(i != (optionId-1)) 
     { 
      document.getElementById("div" + (i+1)).style.display = "none"; 
     } 
    } 
} 
</script>

http://jsfiddle.net/hGxfS/

來源

2011-01-09 02:03:32

Div的能見度與javascript - 問題

回答

相關問題