• Displaying Tabs

tabs is required for jQuery.fn.tabs

<Require feature="tabs" />

Displaying Tabs

jQuery.fn.tabs can be used to display tabs. The full range of tabs is represented by the ul, li, and a tags, and the tab content can be specified by the "a" tag. Moreover, the tab tool chip can be specified by the a tags' title attributes.

<script type="text/javascript">
  jQuery(function($) {
    $('#tabs').tabs();
  });
</script>
<div id="tabs">
<ul>
<li><a href="#dog" title="tab of dog">DOG</a></li>
<li><a href="#cat" title="tab of cat">CAT</a></li>
</ul>
<div id="dog">contents of dog</div>
<div id="cat">contents of cat</div>
</div>

Moreover, jQuery.fn.tabs can specify the callback function to handle the tab switching event. At this point, "this" can be used to display the contents of the switched tab.

  $('#tabs').tabs(function() {
    $(this).text('id: ' + this.id);
    $(window).adjustHeight();
  });

Callback function arguments can also be used. At this point, the number corresponding to "i" is displayed and content is used to display the contents of the switched tab.

  $('#tabs').tabs(function(i, content) {
    $(content).text('i: ' + i);
    $(window).adjustHeight();
  });