jQuery TOOLSでタブ

javascript

準備

  • ダウンロード

http://jquerytools.org/download/



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

  <title>jQuery Tools standalone demo</title>

    <!-- include the Tools -->
  <script src="js/jquery.tools.min.js"></script>
  
  <!-- standalone page styling (can be removed) -->
  <link rel="stylesheet" type="text/css"
        href="css/tools_style.css">
</head>
<body><!-- the tabs -->
<ul class="tabs">
	<li><a href="#">タブ１</a></li>
	<li><a href="#">タブ２</a></li>
	<li><a href="#">タブ３</a></li>
	<li><a href="#">タブ４</a></li>
	<li><a href="#">タブ５</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
	<div>タブ１の内容をここに</div>
	<div>タブ２の内容をここに</div>
	<div>タブ３の内容をここに</div>
	<div>タブ４の内容をここに</div>
	<div>タブ５の内容をここに</div>
</div>

<script>
// perform JavaScript after the document is scriptable.
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>