2013.01.19
javascript

タブで表示切り替え jQuery プラグインなし

タブみたいなメニューで、クリックすると同じページ内(同じHTMLファイル内)で表示を切り替える方法です。

Attention!!
追記(2013年7月20日): この記事のソースの改良版をこちらに書きました。

jQueryとCSSでできます。

タブのようなメニューで、表示を切り替える

head内にjQueryを読み込む記述

以下をheadに記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

HTMLのソース

サンプルから一部内容を省略しますが、以下は説明です。

<div class="full_content">
<ul>
   <li class="active">ホーム</li>
      <div class="content">
      ここに内容が入ります。     
      </div> 
     
   <li>画像</li>
      <div class="content">
    ここに内容が入ります。 
    </div>

   <li>リンク</li>
      <div class="content">
      ここに内容が入ります。
      </div>
  
   <li>入力</li>
      <div class="content">
      ここに内容が入ります。
      </div>
   
   <li>テーブル</li>
      <div class="content">
      ここに内容が入ります。
      </div>     
</ul>
</div>

「ここに内容が入ります。」の部分は、切り替わったときにそれぞれ表示される部分です。
ハイライトした3行目は後述します。

CSSのソース

.full_content {
	width:508px;
	height:380px;
	position:relative;
	margin:0 auto;
	clear:both;
}
ul li{
	width:100px;
	height:25px;
	background:#9C9;
	float:left;
	list-style:none;
	padding:10px 0 0;
	margin-left:2px;
	text-align:center;
	display:block;
	cursor: pointer;
	color:#FFF;
}
ul li:first-child {
	margin-left:0;
}
ul {
	padding:0;
	margin:0;
}
.active , .hover {
	background:#6CC;
	font-weight:bold;
}
.content {
	width:478px;
	height:320px;
	border:#6CC 5px solid;
	background:#FFF;
	top:32px;
	left:0;
	padding:10px;
	position:absolute;
}

では上記のソースでハイライトしたポイントをざっくりと説明します。

  • 4行目と40行目
  • 4行目のposition:relative;に対し40行目にposition:absolute;を記述しています。
    ここでは.full_contentが親要素で.contentが子要素になります。

  • 18行目
  • cursorというプロパティでマウスカーソルの形を変更できます。
    ここではリンクを使っていませんのでマウスを乗せても通常の矢印マークとなってしまい、クリックできるのが一見わかりません。
    クリックすると切り替わる仕様ですので、マウスオーバー時に指マークになるように変更。

  • 21行目
  • :first-childというのは一番目の子要素に適用できるセレクタです。今回の場合は、liの一番目、つまりタブの一番左側だけmargin-left:0;にという意味ですね。
    15行目でmargin-left:2px;と記述していますが、CSSは後から記述された方が優先されるので21行目の方が適用されます。

jQueryのソース

head内もしくはbody内に以下を記述します。

<script type="text/javascript">
$ (function(){
	$ (".content:not('li.active + .content')").hide();
	
	$ ("li").hover(function(){
		$ (this).addClass("hover")
	},
	function(){
		$ (this).removeClass("hover")
    });
	
	$ ("li").click(function(){
		$ ("li").removeClass("active");
		$ (this).addClass("active");
		$(".content").fadeOut();
		$ ("li.active + .content").fadeIn();		
	});	
});
</script>

jQuery自体あまり得意ではないのですが、そんなに難しいことはしていないので簡単に説明します。CSSについて分かるという前提での説明になります。

  • 2行目
  • CSSで記述した.contentを.hide()、つまり隠したい状況です。.contentを隠したいだけなら、2行目は

    $ (".content").hide();
    

    となります。
    HTMLのソースでハイライトした3行目を見てみると、liにactiveというクラスが付いています。
    ページが読み込まれた時には、この部分は隠さないようにします。
    今回はページが読み込まれた時にli.active + .contentの部分は隠さないようにするので、:not(‘li.active + .content’)を追加。
    :not()は()以外となります。
    ここではli.active + .content以外の.contentを隠すとなります。

  • 4行目~9行目
  • liにhover(マウスオーバー)したときに、CSSで記述したhoverというクラスを追加し、マウスが外れたときにhoverというクラスを外す、ということです。

  • 11行目~16行目
  • liをクリックしたときに

    1. liからactiveというクラスを消す。
    2. クリックしたli(ここではthis)にactiveというクラスを追加。
    3. .contentを.fadeOut()、つまりフェードアウト(ゆっくりと消す)する。
    4. activeというクラスがついたliの.contentを.fadeIn()、つまりフェードイン(ゆっくりと出てくるようにする)する。

    ということが起こるようになっています。

jQueryは使いこなせるようになるとデザインの幅が広がって良いと思います。
私もプラグインを使うほうが多いのですが、プラグイン自体をカスタマイズするときに少しjQueryの知識があれば尚良いです。

Memo:

ちなみに私は「Web制作の現場で使う jQueryデザイン入門」という本で初めてjQueryを勉強するようになりました。
CSSとHTMLが分かる人にはお勧めの本です。自分でコードが書けるようになります。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP