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

show/hide 3 or more text blocks in javascript

本文关键字：文本 3个 javascript 显示 隐藏      更新时间：2023-09-26

我想在javascript中显示/隐藏3个或更多文本块的代码。我发现这个解决方案在这里显示/隐藏点击，但只适用于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 ?

例如，这个函数将通过添加必要的类来显示/隐藏任意数量的元素:

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的数组，第二个参数是包含要隐藏的元素id的另一个数组。

用法:

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

相关文章：