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 panels are represented by a numerical index starting at zero. Specifying a different tab to open by default is as easy as supplying its index number as the value for the active
property. When the page loads...