[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>要素を表示非表示の切り替えをしてますね。

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

こちらは、<p>タグの内容もJSに入れて切り替える方法です。
■コードは以下です。

<script language="javascript" type="text/javascript">

function Display_JS(no){

　if(no == "no1"){

　　document.getElementById("JS").innerHTML = "<p>「元に戻す」をクリックすると元に戻ります。</p>";

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

　　document.getElementById("JS").innerHTML = "<p>上記「切り替え」をクリックすると、ここの内容が切り替わります。</p>";

　}
}
</script>

<a href="javascript:void(0);" onclick="Display_JS('no1')">切り替え</a>
<a href="javascript:void(0);" onclick="Display_JS('no2')">元に戻す</a>

<div id="JS">
<p>上記「切り替え」をクリックすると、ここの内容が切り替わります。</p>
</div>

■応用してクラスを追加変更してCSSを切り替える。

こちらは、上記のコードを応用して、クラスを切り替える方法です。下記はif文のイベント分岐の指定に入れればできそうです。
■コードは以下です。

document.getElementById("id-name").className = "class-name";

クリックされてのタブのデザイン変更もこれでできそうです。

できあがっているタブならコリスさんで紹介されていた
[JS]シンプルなタブを実装する超軽量（5KB）のスクリプト -SimpleTabs
もいいですね。

そういや自分はタブつくったとき、WWW WATCHさんのJavaScript でタブ切り替え UI を実装するを参考に作ったな。WWW WATCHさんはArchiva さんのタブ切替をサクッと実装 ： Archivaを参考に作ったと書いてた。

■Javascript初心者の方の参考書です。一覧はこちら

Popularity: 73% [?]