在javascript中顯示/隱藏3個或更多文本塊

Question

我想要一個在javascript中顯示/隱藏3個或更多文本塊的代碼。我在這裏找到了這個解決方案Show/Hide On Click，但只適用於2個文本塊。

HTML：

<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a> 
<div id="text1" class="hide"> text1 </div> 
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a> 
<div id="text2" class="hide"> text2 </div> 

CSS：

div.hide { display:none; [your properties]; } 
div.show { [your properties]; } 

的Javascript：

function showText(show,hide) 
{ 
document.getElementById(show).className = "show"; 
document.getElementById(hide).className = "hide"; 
} 

如何解決它，使之適用於更多的文本3？

Answer 1

例如，該功能將顯示/通過添加必需的類隱藏任何數量的元素：

function showText(showElements, hideElements) 
{ 
for (var i=0;i<showElements.length; i++) { 
    document.getElementById(showElements[i]).className = "show"; 
} 

for (var i=0;i<hideElements.length; i++) { 
    document.getElementById(hideElements[i]).className = "hide"; 
} 
} 

第一個參數是包含要顯示元件ID的數組，並且第二個是另一陣列，用於那些你想隱藏的。

用法：

showText(['id1', 'id2'], ['id3', 'id4']);