KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > 表示内容の切り替え(JavaScript)

表示内容の切り替え(JavaScript)

JavaScriptを使って表示内容を切り替えるサンプル。getElementById()を使って指定IDのオブジェクトにアクセス。

スタイルシート切り替えサンプル

SEO的にはこっちがよさそうですね。

サンプルコード
  1.  <script language="javascript" type="text/javascript">
  2.  <!--
  3.  function Display(no){
  4.  
  5.   if(no == "no1"){
  6.  
  7.   document.getElementById("SW1").style.display = "block";
  8.   document.getElementById("SW2").style.display = "none";
  9.  
  10.   }else if(no == "no2"){
  11.  
  12.   document.getElementById("SW1").style.display = "none";
  13.   document.getElementById("SW2").style.display = "block";
  14.  
  15.   }
  16.  
  17.  }
  18.  -->
  19.  </script>
  20.  
  21.  <h5><a href="javascript:;" onclick="Display('no1')">SW1</a></h5>
  22.  <h5><a href="javascript:;" onclick="Display('no2')">SW2</a></h5>
  23.  
  24.  <div id="SW1">
  25.   <p>これはSW1のエリアです。上記SW2をクリックすると消えます。</p>
  26.  </div>
  27.  
  28.  <div id="SW2" style="display:none;">
  29.   <p>これはSW2のエリアです。上記SW1をクリックすると消えます。</p>
  30.  </div>

実行結果

SW1
SW2

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

内容もJavascriptで切り替えサンプル

サンプル
  1.  <script language="javascript" type="text/javascript">
  2.  
  3.  function Display_JS(no){
  4.  
  5.   if(no == "no1"){
  6.  
  7.   document.getElementById("JS").innerHTML = "<p>「元に戻す」をクリックすると元に戻ります。</p>";
  8.  
  9.   }else if(no == "no2"){
  10.  
  11.   document.getElementById("JS").innerHTML = "<p>上記「切り替え」をクリックすると、ここの内容が切り替わります。</p>";
  12.  
  13.   }
  14.  }
  15.  
  16.  </script>
  17.  <h5><a href="javascript:;" onclick="Display_JS('no1')">切り替え</a></h5>
  18.  <h5><a href="javascript:;" onclick="Display_JS('no2')">元に戻す</a></h5>
  19.  
  20.  <div id="JS">
  21.   <p>上記「切り替え」をクリックすると、ここの内容が切り替わります。</p>
  22.  </div>

実行結果

切り替え
元に戻す

上記「切り替え」をクリックすると、ここの内容が切り替わります。

ハイパフォーマンスJavaScript
作者:Nicholas C. Zakas | 価格:￥ 2,940
投稿日 2007年6月 1日 11:15
カテゴリ JavaScript
タグ インターフェイス | サンプルコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1074

トラックバック(0)

コメント

musicg

2011年3月 9日 02:00 | 返信

項目を3つに増やすにはどのようなテキストを記載すればよいのでしょうか？

コメントする
Name
Email Address
URL
PAGE RANK
TIME LINE
2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.27

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境

いろいろあってUbuntuをインストールすることに。

2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

2012
01.21

[PHP]共有サーバーユーザーのためのPEARインストール方法

共有サーバーでは自由にPEARのパッケージがインストールできないので、 プロジェクトローカルに設置することになりますが、以前httpベースのものを使ってみたんですけど、 やたら重くて使い物にならなかったので、僕は普通にFTPでアップするようにしてます。

ってことでプロジェクトローカルへのPEARのインストール方法。

Tags