顯示和隱藏DIV包含後選擇

我有這個JavaScript函數，可以讓我隱藏和顯示點擊一個按鈕後。每個按鈕都有一個div鏈接到它。當我點擊一個按鈕時，上一個按鈕包含的內容被隱藏，第二個按鈕顯示他的內容。我很喜歡用select來做同樣的工作。我卡在那裏。請幫助我達到我的目標，發佈我按鈕操作的方式。忍受着我。顯示和隱藏DIV包含後選擇

function visibilite(id) { 
    var divs = document.getElementsByTagName('div'); 
    for(var no=0;no<divs.length;no++){ 
     if(divs[ no].className=='divs') 
     { 
      'divs' 
      divs[ no].style.display = "none"; 
     } 
} 
document.getElementById(id).style.display = "block"; 


<a href="javascript:visibilite('test1');" class="btn btn-primary btn-sm"> 
1 year 
</a> 
<a href="javascript:visibilite('test2');"class="btn btn-primary btn-sm"> 
2 year 
</a> 
<div id="test1" class="divs" style="display:yes"> 
sfssdfsdfsfsf 
</div> 

<div id="test2" class="divs" style="display:none"> 
sfssdfsdfsfsf 
</div>

來源

2016-01-28 branche

爲什麼你本身有字符串''divs''一行在'if'塊（它不是一個語法錯誤，但它看起來很奇怪，除非這是因爲你沒有顯示的原因）？ –

Working fiddle。

您可以在選定的標籤使用onchange，請檢查下面的例子。

注意： in display:yes yes對於display屬性不是valide值。

希望這會有所幫助。

function visibilite(_this) 
 
{ 
 
    var id = _this.value; 
 
    var divs = document.getElementsByTagName('div'); 
 

 
    for(var i=0;i<divs.length;i++){ 
 
     if(divs[i].className=='divs') 
 
     { 
 
      divs[i].style.display = "none"; 
 
     } 
 
    } 
 
    document.getElementById(id).style.display = "block"; 
 
}

<select onchange='visibilite(this)'> 
 
    <option value='test1'>1 year</option> 
 
    <option value='test2'>2 year</option> 
 
</select> 
 

 
<div id="test1" class="divs">First year content</div> 
 
<br> 
 
<div id="test2" class="divs" style="display:none">Second year content</div>

來源

2016-01-28 15:47:13

它工作，因爲我想它非常感謝。我不知道爲什麼，當點擊箭頭投票數沒有出現它仍然是0 – branche

請以此爲建設性的，但你應該採取防禦編碼方法，檢查每個函數的返回，從不假定調用函數將會成功...如果它可能出錯，那麼你應該檢查並允許它，這樣你的代碼將按預期工作。 – SPlatten

由於div test1和test2包含表單的字段，因此我正在面對代碼結構的一個新問題。 test2具有test1和其他字段的字段。這是很難的，除非我顯示test2的領域引起一些字段具有相同的名稱...更多了在測試1和測試2中的所有字段都需要我的時候顯示test2的，我填寫的所有字段我不能保存，因爲場形式在test1的需要，以及... – branche

顯示和隱藏DIV包含後選擇

回答

相關問題