Tabs

実行例

A

B

C

コード

<head>
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
</head>
<body>
    <!-- -->
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">1</a></li>
            <li><a href="#tabs-2">2</a></li>
            <li><a href="#tabs-3">3</a></li>
        </ul>
        <div id="tabs-1">
            <p>A</p>
        </div>
        <div id="tabs-2">
            <p>B</p>
        </div>
        <div id="tabs-3">
            <p>C</p>
        </div>
    </div>
    <!-- -->

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery-ui/js/jquery.ui.tabs.min.js"></script>

<script type="text/javascript">
$(function() {
    $( '#tabs' ).tabs();
} );
</script>

</body>

参考

JavaScriptのドキュメントから検索