Home > Tags > クラス切替

クラス切替

[Javascript]aタグで内容表示の切替とclassを変更する方法

JavaScriptを使って表示内容を切り替えるサンプルがKANTENNA.COMさんで掲載されていたので引用メモ。
getElementById()を使って指定IDのオブジェクトにアクセス。

■<a>タグで内容表示切替サンプル

これはSW1のエリアです。上記SW2をクリックすると消えます。

■コードは以下です。

<script language="javascript" type="text/javascript">
function Display(no){

　if(no == "no1"){

　　document.getElementById("SW1").style.display = "block";
　　document.getElementById("SW2").style.display = "none";

　}else if(no == "no2"){

　　document.getElementById("SW1").style.display = "none";
　　document.getElementById("SW2").style.display = "block";

　}
}
</script>

<a href="javascript:void(0);" onclick="Display('no1')">SW1</a>
<a href="javascript:void(0);" onclick="Display('no2')">SW2</a>

<div id="SW1">
<p>これはSW1のエリアです。上記SW2をクリックすると消えます。</p>
</div>

<div id="SW2" style="display:none;">
<p>これはSW2のエリアです。上記SW1をクリックすると消えます。</p>
</div>

<div>の中の<p>要素を表示非表示の切り替えをしてますね。