在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']);