0

我想要一个在 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 个以上的文本？

4

1 回答 1

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']);
于 2013-01-12T09:45:51.163 回答