ウェブ学のすすめ

Study of Web Design & Programing

【Yetii】〜Yet (E)Another JavaScript Tab Interface Implementation〜

JavaScript

Yetii - Yet (E)Another JavaScript Tab Interface Implementation | kminek.pl

プレビュー

↓スマートフォンの方はこちらからプレビューできます。
Yetii

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yetii</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/yetii-min.js"></script>
<!--[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]-->
</head>
<body>
<div id="tab-container-1">

    <ul id="tab-container-1-nav">
    <li><a href="#tab1">HTML</a></li>
    <li><a href="#tab2">CSS</a></li>
    <li><a href="#tab3">JavaScript</a></li>
    <li><a href="#tab4">jQuery</a></li>
    </ul>

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

CSS

@charset "utf-8";

* {
	margin:0;
	padding:0;
}
#tab-container-1 {
	width: 500px;
}
ul#tab-container-1-nav {
	list-style-type: none;
	width: 500px;
	float: left;
	background: url(images/pixel.gif) bottom left repeat-x;
}
ul#tab-container-1-nav li {
	margin-right: 2px;
	float: left;
}
ul#tab-container-1-nav a {
	float: left;
	display: block;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-bottom: 0;
	color: #666;
	background: #eee;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}
ul#tab-container-1-nav a:hover {
	background: #fff;
}
ul#tab-container-1-nav a.active {
	background: #fff;
	padding-bottom: 5px;
	cursor: default;
	color: #00BF08;
}
.tab {
	width: 478px;
	clear: left;
	border: 1px solid #ccc;
	border-top: none;
	padding: 10px;
}

h2 {
	color: #00BF08;
}