webツール

超簡単！jQueryでコンテンツのタブ切り替えを実装する方法

 
jQueyでタブ切り替えのコンテンツを実装する方法

これがプラグインとか要らないぐらいホント簡単なんですよ。とかいっておいて僕もよく忘れるので書きます。

意外に役に立つのでササっとやってみてくださいね。

jQueryでコンテンツのタブ切り替えを実装する

HTML

			
  				  				
  					
  						
パネル1
  						
パネル1です

全体をtabクラスの

で覆います。こういったタブ切り替えの場合はコンテンツとタブを別のブロック要素で実装します。

今回の場合は

    タグの

  • がタブにあたります。
    其の下の
    が切り替わるパネルですね。
    この「data-contentid」が大事なので記載しておいてください。

     

    CSS

    * {  	margin: 0;  	padding: 0;  	border: 0;  	font-size: 100%;  	font: inherit;  	vertical-align: baseline;  	color: #000;  }    a {	text-decoration: none;}  ul {	list-style: none;}    /* 基本のレイアウト */  body {  	background: #fff;  	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  }  	.tab-menu {  	border-bottom: 6px solid #b9d5dc;  }  .tab-menu > li {  	float: left;  	margin: 0 3px 0 0;  }  .tab-menu > li > a {  	display: block;  	padding: 8px 20px 4px 20px;  	background: #bbb;  	border-radius: 5px 5px 0 0;  	color: #fff;  }  .tab-menu > li > a:hover {  	background: #a2a2a2;  }  .tab-menu > li > a:active {  	background: #757575;  }  .tab-menu > li.selected > a {  	background-color: #b9d5dc;  	color: #fff;  }  .tab-contents {  	padding: 20px 2.2727272%;/* 2.2727272%（20px/880px） */  	background: #ededed;  }  .tab-contents .hidden {  	display: none;  }

    まぁ普通の設定です。

    タブの幅やら切り替えコンテンツの幅やらは好きに調節して、
    切り替えコンテンツを非表示にする用のクラス（今回は.hidden）に「display:none;」を指定しておきましょう。

    非表示用のクラスをつけたり外したりすることで表示/非表示を切り替えます。

    他のポイントとしては表示中のコンテンツにあたるタブの背景色を変えておくなど。

     

    Javascript

    5行目event.preventDefault();でaタグのリンク機能を無効化しています。

    12行目。クリックした要素を変数$thisに格納しているので、それを利用し、親要素である

  • のクラス「selected」を一度、全て外します。
    直後に続くend()ですが、直前のトラバース（HTML要素の取得）指示を無視し、その後に続くメソッドへと指示をつなげます。

    今回の場合つまりどういうことかというと、end()以前では$this.parent().siblings()の「siblings」で同じ階層の

  • を取得しているのでこれを実行しつつ無視し、実質「$this.parent().addClass(‘selected’)」としていることになります。解りづらい！
    siblings( [selector] ) – jQuery API 日本語リファレンス

    14行目で、クリックしたタブのdata-tabid=””値を変数tabIdに格納します。
    data~要素の取得は.data(‘data-の後に続く文字列’)で出来ます。

    クリックしたタブの直近の親要素を.closest()で取得します。
    closest([expr]) – jQuery 日本語リファレンス

    引数に‘.tab’と指定しているので

    が取得できますので、「

    に内包されるdiv class=”tab-contents”の子要素」からdata-tabid=””と値が合致するdata-contentid=””値を持っている要素にだけ、非表示用クラス「hidden」を外してあげる処理をします。
    そうでないものにはクラス「hidden」をつけます。ここがif~elseでやってることです。
    これで完成です。

    data要素を使ってタブ切り替えを実装するサンプル

    ですが、もう少し解りやすい方法があるんですよね。おなじみaタグを使う方法です。

     

    HTML

    			
      				  				
      					
      						
    パネル1
      						
    パネル1です
      					
      					
      						
    パネル2
      						
    パネル2
      					
      					
      						
    パネル3
      						
    パネル3です

    CSS

    * {  	margin: 0;  	padding: 0;  	border: 0;  	font-size: 100%;  	font: inherit;  	vertical-align: baseline;  	color: #000;  }    a {	text-decoration: none;}  ul {	list-style: none;}    /* 基本のレイアウト */  body {  	background: #fff;  	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  }  .tab-menu {  		overflow: hidden;  	border-bottom: 6px solid #b9d5dc;  }  .tab-menu > li {  	float: left;  	margin: 0 3px 0 0;  }  .tab-menu > li > a {  	display: block;  	padding: 8px 20px 4px 20px;  	background: #bbb;  	border-radius: 5px 5px 0 0;  	color: #fff;  }  .tab-menu > li > a:hover {  	background: #a2a2a2;  }  .tab-menu > li > a:active {  	background: #757575;  }  .tab-menu > li.selected > a {  	background-color: #b9d5dc;  	color: #fff;  }  .tab-contents {  	padding: 20px 2.2727272%;/* 2.2727272%（20px/880px） */  	background: #ededed;  	clear: both;  }  .tab-contents .hidden {  	display: none;  }

    Javascript

    	$(function(){  		//.タブの.selectedのhref=""で指定しているidのパネルを非表示  		$("div.tab-contents div:not("+$("ul.tab-menu li a.selected").attr("href")+")").hide();    		$('ul.tab-menu li a').click(function(){  			var $this = $(this);  			$this.siblings().removeClass('selected');  			$(this).addClass('selected');    			$("div.tab-contents div").hide();    			$($this.attr("href")).show();    			return false;				  			});  	  		});

    こちらも流れは同じです。

    3行目で非表示にするタブをCSS3セレクタの:notで除外しつつ指定しています。.selectedクラスが指定されているもの以外のaタグのhref値と同じidのパネルをhide()します。
    要素:not – 擬似クラスのサンプル – HTML5とCSS3の辞典[やさしいタグ入門辞書]

    そのあとはsiblings()でアレしてselectedを付けるのと外すのでごにょごにょ。1つ目と同じ手順で操作していきます。最後はリンクを無効化するreturn false;でフィニッシュします！こちらはこれで完成。

     

    jQuery初心者でもパパっと使えてしまいまうし便利なタブ切り替えを、メモ代わりに2種類ご紹介しました。

    ソースはこちらの2冊！

     

    でわ！

RELATED POST