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

JavaScript ・ jQuery　

CSS3 ・サンプルあり・メニュー

タブみたいなメニューで、クリックすると同じページ内（同じHTMLファイル内）で表示を切り替える方法。
jQueryで、プラグインを使わずにできる方法、ソースを紹介します。

MEMO: 以前こちらとこちらに書いたのですが、ソースを大幅に変更し改良しました。

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">
   <div class="menu active">ホーム</div>
   <div class="content">
   ここに内容が入ります。     
   </div> 
      
   <div class="menu">画像</div>
   <div class="content">
   ここに内容が入ります。     
   </div> 

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

サンプルから一部内容を省略していますが、「ここに内容が入ります。」の部分は、切り替わったときにそれぞれ表示される部分です。
ハイライトした2行目は後述します。

CSSのソース

.full_content {
	width:508px;
	height:380px;
	position:relative;
	margin:10px auto;
	clear:both;
}
.menu{
	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;
}
.menu:first-child {
	margin-left: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行目と36行目

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

18行目

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

21行目

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

jQueryのソース

head内もしくはbody内に以下を記述します。
head内に記述するときは上記で記述したjquery本体よりも後に記述するのを忘れずに！

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

jQuery説明

3行目

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

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

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