0

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つ以上のテキストで機能するように修正するにはどうすればよいですか?

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 を含む配列で、2 番目のパラメーターは、非表示にする要素の別の配列です。

使用法：

showText(['id1', 'id2'], ['id3', 'id4']);
于 2013-01-12T09:45:51.163 に答える