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

在javascript中显示/隐藏3个或更多文本块

1 个答案: