Advanced User Interface Controls and Components
Gets or sets the currently selected tab by using its index.
A Number. The default value is -1, stating that there is no tab currently selected in TabStrip.
Whenever a new tab is added to the TabStrip, automatically becomes selected. This property value changes depending on the index of selectedTab in the list of all tabs present in the TabStrip.
Supported in: v1.0.
The following example shows how to select a tab from code using the tab index. In our example the tab at position 2 in the list will become selected. That means the third tab, because the list is indexed starting from 0.
$(document).ready(function() {
// Create an instance of TabStrip widget
var $tab = $('#tabstrip').tabstrip();
// Select the third tab
$tab.tabstrip("option", "selectedIndex", 2);
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.tabstrip.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.tabstrip.min.js"></script>
</head>
<body>
<div id="tabstrip" class="widget">
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
<li><span>Tab 3</span></li>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}