jQuery UIでtabメニュー - ウェブ学のすすめ

プレビュー

↓スマートフォンの方はこちらからプレビューできます。
jQuery UIでtabメニュー - js do it

コード

HTML

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

JavaScript

$(function(){
	$('#tabs').tabs();
});

CSS

body{ 
    font-family:
	"ヒラギノ角ゴ Pro W3", 
	"Hiragino Kaku Gothic Pro", 
	"メイリオ", 
	Meiryo, 
	Osaka, 
	"ＭＳ Ｐゴシック", 
	"MS PGothic", 
	sans-serif；
}

#tabs {
    width:465px;
    margin:20px auto;
}
ul#icons {
    margin: 0; 
    padding: 0;
}
ul#icons li {
    margin: 2px; 
    position: relative; 
    padding: 4px 0; 
    cursor: pointer; 
    float: left;  
    list-style: none;
}
ul#icons span.ui-icon {
    float: left; 
    margin: 0 4px;
}