Home > Tags > クラス切替

クラス切替

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

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

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


・SW1 ・SW2

これは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>タグで内容表示切替サンプル2

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

…続きを読む >>

Popularity: 66% [?]

Home > Tags > クラス切替

Sponsers
タグクラウド
最新のWeb関連書籍
Sponsers
関連する投稿
最近のコメント
アーカイブ
トゥウィター
プラグイン
ページ

Return to page top