ウェブ学のすすめ

Study of Web Design & Programing

jQuery Tools tabs

jQuery

プレビュー


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

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Tools standalone demo</title>
<link rel="stylesheet" href="css/standalone.css">
<link rel="stylesheet" href="css/tabs.css">
<link rel="stylesheet" href="css/tabs-panes.css">
<script src="js/jquery.tools.min2.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>
<ul class="tabs">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>

<div class="panes">
    <div>HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上のドキュメントを記述するためのマークアップ言語である。<br>※引用元：Wikipedia</div>
    <div>Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。<br>※引用元：Wikipedia</div>
    <div>JavaScript（ジャバスクリプト）とは、オブジェクト指向スクリプト言語である。主にウェブブラウザなどのクライアントサイドで実装され、動的なウェブサイトの構築や、RIAなどの高度なユーザインタフェースの開発に用いられる。<br>※引用元：Wikipedia</div>
</div>
<script>
$(function() {
    $("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>