O'Reilly logo

jQuery UI 1.10: The User Interface Library for jQuery by Dan Wellman, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Working with tabs

The Tabs widget provides a number of options we can use to perform actions, such as selecting or disabling tabs, or adding transition effects. Over the next few examples, we will take a look at some of these options, beginning with selecting tabs.

Selecting a tab

Let's look at how these configurable properties can be used. For example, let's configure the widget so that the second tab is displayed when the page loads. Remove the link for tabsTheme.css in the <head> of tabs2.html and change the final <script> element so that it appears as follows:

<script>
  $(document).ready(function($){
    var tabOpts = {
      active: 1
    };
    $("#myTabs").tabs(tabOpts);
  })
</script>

Save this as tabs3.html. The different tabs and their associated content ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required