css
http://jqueryui.com/themes/base/jquery.ui.tabs.css

<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
</script>


<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

<hr/>

<div id="tabs">
   <ul>
   
     <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    <div id="tabs-2">
      <p>2222</p>
   </div>
</div>


 

arrow
arrow
    全站熱搜

    Rita 發表在 痞客邦 留言(0) 人氣()