タブ切り替えパネル - ウェブ学のすすめ

プレビュー

↓スマートフォンの方はこちらからプレビューできます。
タブ切り替えパネル - js do it

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タブパネル</title>
<link href="css/style.css" rel="stylesheet">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
	$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
	$("ul.tab li a").click(function(){
		$("ul.tab li a").removeClass("selected");
		$(this).addClass("selected");
		$("ul.panel li").hide();
		$($(this).attr("href")).show();
		return false;
	});
});
</script>
</head>
<body>
<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">HTML</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">JavaScript</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">PHP</a></li>
</ul>

<ul class="panel">
<li id="tab1">HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上のドキュメントを記述するためのマークアップ言語である。Web作成基本プログラミング用語であり、C言語のようなプログラミングとは違い、文章の中に記述することでさまざまな機能を記述設定することができる。 <br>※引用元：Wikipedia</li>
<li id="tab2">Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。<br>※引用元：Wikipedia</li>
<li id="tab3">JavaScript（ジャバスクリプト）とは、オブジェクト指向スクリプト言語である。主にウェブブラウザなどのクライアントサイドで実装され、動的なウェブサイトの構築や、RIAなどの高度なユーザインタフェースの開発に用いられる。<br>※引用元：Wikipedia</li>
<li id="tab4">jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。<br>※引用元：Wikipedia</li>
<li id="tab5">PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。<br>※引用元：Wikipedia</li>
</ul>
</div>
</body>
</html>

CSS

@charset "utf-8";

*{
	margin:0;
	padding:0;
}
#container{
	width:500px;
	margin:50px auto;
}
ul.tab{
	padding:0;
}
ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
ul.tab li a{
	outline:none;
	background:url("images/tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
}
ul.tab li a.selected{
	background:url("images/tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
ul.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:0;
}
ul.panel li{
	list-style-type:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}