2013.07.20
javascript

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

Attention!!

この記事の再・改良版はこちらです。
下記で紹介するソースはHTMLの文法に誤りがあるとご指摘いただきました。
ul要素の中にli以外の子要素を含むことはできません!!
書き直しましたのでこちらを参考にしてください。

タブみたいなメニューで、クリックすると同じページ内(同じHTMLファイル内)で表示を切り替える方法です。
以前こちらに書いたのですが、ソースを一部変更し改良しました。

前回のソースですと、タブが開いている状態でもボタンをクリックすると再度タブが開かれるので一瞬点滅するという状態でした。
さっそく直しましたのでそのソースを再度紹介します。

jquery001

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

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内に以下を記述します。
head内に記述するときは上記で記述したjquery本体よりも後に記述するのを忘れずに!

<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:not('li.active + .content')").fadeOut();
        $ ("li.active + .content").fadeIn();	
	});
});
</script>

jQuery説明

  • 3行目
  • 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というクラスを外す、ということです。

  • 10行目~14行目
  • liをクリックしたときに

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

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

jQueryは使いこなせるようになるとデザインの幅が広がって良いと思います。

Memo:

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

関連する記事

コメント & トラックバック
  1. sora

    はじめまして。

    まだまだ勉強中の身で
    いつもお世話になっております。

    この記事に書かれているタブの切り替えを実装はできたのですが、タブ内の要素からリンクし、戻ってきた際に、直前まで選択されていたタブを維持するような仕組みはできるのでしょうか。

    jquery内のcookie部分を除いては見たのですが
    どこをどういじればよいのかさっぱりで・・・。

    初歩的な質問かもしれませんが
    何卒よろしくお願いします。


    • Ri-mode

      soraさん

      とっても残念なのですが、こちらのソースではリンクから戻ってきた際に、直前まで選択されていたタブを維持するのはできません。
      jQueryのcookieは関係ないと思います(汗)。
      お力になれずすいません。


  2. inoue

    コメント失礼致します。

    ul要素の子要素にli要素以外の要素を入れるのは文法的に間違いです。
    「タブ jquery」で検索するとgoogleで上位に表示されますので、正しい情報を記載した方がよろしいかと思い、僭越ながらコメント致しました。


    • Ri-mode

      inoueさん

      ご指摘ありがとうございます。
      恥ずかしながらご指摘いただくまで、ul要素の中にli要素以外の要素を入れるのが間違いだと知りませんでした。
      私自身も確認し間違いだと認識致しました。
      まだまだ勉強不足だと痛感です。
      こちらにul、liを使用しない方法で書き直しました。
      今後ともご指導よろしくお願いします。


  3. hachi

    Ri-mode様

    はじめましてhachiと申します。
    いつも参考にさせていただいております。

    大変不躾で恐縮しておりますが、1つご質問がございます。

    私もJQueryを用いたタブ表示切り替えを考えているのですが、IE7で作動しない事に苦慮しております。IE6は無視するにしても、IE7対応はまだ必要だろうとの考えから対応方法を模索中です。

    今回参考にさせていただいたRi-mode様のものもIE7では作動しないようです。
    IE7での作動を可能とするよい記述方法があればぜひご教示いただければ幸いです。

    重ね重ね不躾なご質問でありますこと、お詫び申し上げますが、ぜひよろしくお願いします。

    hachi


    • Ri-mode

      hachiさん

      コメントありがとうございます。
      そして返信が遅くなってしまい申し訳ないです。

      こちらのソースはCSS3を使用していますので、IE7では表示がうまくできません…。
      IE7は2012年後半から、全ブラウザの中のシェアが2%以下となっているので個人的には無視しても良いのでは…と思っております。

      答えになっておりませんが、もしIE7で対応させたいのでしたらこちらのソースでは使えないので、以前にプラグインを使った方法もこちらに書きました。
      このプラグインを使用する方法でしたらIE7でも動きますのでぜひ試してみてください。


コメントをどうぞ

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


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

*


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