다음과 같이 작성한다.
<html>
<head>
<link rel="stylesheet" href="./css/jquery-ui-themeroller.css" type="text/css" media="screen" />
<script type="text/javascript" charset="UTF-8" language="javascript" src="./js/jquery-1.2.6.js" ></script>
<script type="text/javascript" charset="UTF-8" language="javascript" src="./js/jquery.ui.all.packed.js" ></script>
<script>
$(document).ready(function(){
$("#tabs > ul").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example > ul').tabs();</code></pre>
</div>
<div id="fragment-2">
<p>Second tab is active by default:</p>
<pre><code>$('#example > ul').tabs();</code></pre>
</div>
<div id="fragment-3">
<p>Third tab is active by default:</p>
<pre><code>$('#example > ul').tabs();</code></pre>
</div>
</div>
</body>
</html>
<head>
<link rel="stylesheet" href="./css/jquery-ui-themeroller.css" type="text/css" media="screen" />
<script type="text/javascript" charset="UTF-8" language="javascript" src="./js/jquery-1.2.6.js" ></script>
<script type="text/javascript" charset="UTF-8" language="javascript" src="./js/jquery.ui.all.packed.js" ></script>
<script>
$(document).ready(function(){
$("#tabs > ul").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example > ul').tabs();</code></pre>
</div>
<div id="fragment-2">
<p>Second tab is active by default:</p>
<pre><code>$('#example > ul').tabs();</code></pre>
</div>
<div id="fragment-3">
<p>Third tab is active by default:</p>
<pre><code>$('#example > ul').tabs();</code></pre>
</div>
</div>
</body>
</html>
댓글