code.Atomic8Ball.com

jQuery Tabs Instructions

  1. Confirm that the site has both jQuery (min 1.6+) and jQueryUI (any version)
  2. Place the following between the <head> and </head> tags. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript">
      $(function() {
         $("#tabs").tabs();
      });
    </script>
  3. Add your HTML to create the tabs, wrap the HTML in a <div> that has an id or class matching the selector above. <div id="tabs">
      <ul>
        <li><a href="#tabs-1"></a></li>
        <li><a href="#tabs-2"></a></li>
        <li><a href="#tabs-3"></a></li>
      </ul>
      <div id="tabs-1">CONTENT GOES HERE</div>
      <div id="tabs-2">CONTENT GOES HERE</div>
      <div id="tabs-3">CONTENT GOES HERE</div>
    </div>

Notes:

This is the most common setup, but you have some additional options available

  • open on mouse-over
  • tabs at bottom
  • vertically aligned tabs, rather than horizontal

View more on http://api.jqueryui.com/tabs/