The TabStrip widget displays a collection of tabs with associated tab content. TabStrips are composed of an HTML unordered list of items, which represent the tabs, and a collection of HTML divs, which define the tab content.

Getting Started

 <div id="tabstrip">
     <ul>
         <li>First Tab</li>
         <li>Second Tab</li>
     </ul>
     <div>First Tab Content</div>
     <div>Second Tab Content</div>
 </div>

var tabStrip = $("#tabStrip").kendoTabStrip();

Tabs do not have to have content. If a tab should have no content, it is safe to omit the HTML div.

Loading TabStrip content with Ajax

While any valid technique for loading Ajax content can be used, TabStrip provides built-in support for asynchronously loading content from URLs. These URLs should return HTML fragments that can be loaded in a TabStrip content area.

 <!-- Define the TabStrip HTML -->
 <div id="tabstrip">
     <ul>
         <li>First Tab</li>
         <li>Second Tab</li>
     </ul>
     <div> </div>
     <div> </div>
 </div>

 //Initialize TabStrip and configure one tab with async content loading
 $(document).ready(function(){
     $("#tabstrip").kendoTabStrip({
       contentUrls: [null, "html-content-snippet.html"]
     });
 });

Dynamically configure TabStrip tabs

The TabStrip API provides several methods for dynamically adding or removing Tabs. To add tabs, provide the new item as a JSON object along with a reference item that will be used to determine the placement in the TabStrip.

A reference item is simply a target Tab HTML element that already exists in the TabStrip. Any valid jQuery selector can be used to obtain a reference to the target item. For examples, see the TabStrip API demos.

Removing an item only requires a reference to the target element that should be removed.

 var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
 tabstrip.insertAfter(
     { text: "New Tab" },
     tabstrip.tabGroup.children("li:last")
 );

Selecting a Tab on Initial Load

A common desire with TabStrips is to select a tab and display its associated content on initial load. There are two ways to accomplish this with TabStrip:

1. Manually add the "t-state-active" class to the Tab that should be selected
2. Use the TabStrip API to target and select a Tab

Both approaches produce the same end result. The first approach requires no additional JavaScript, but does require a small amount of HTML configuration.

 <div id="tabstrip">
     <ul>
         <li class="t-state-active">First Tab</li>
         <li>Second Tab</li>
     </ul>
     <div> </div>
     <div> </div>
 </div>

 //Initialize the TabStrip
 $(document).ready(function(){
     $("#tabstrip").kendoTabStrip();
 });

 <div id="tabstrip">
     <ul>
         <li>First Tab</li>
         <li>Second Tab</li>
     </ul>
     <div> </div>
     <div> </div>
 </div>

 //Initialize the TabStrip and select first tab
 $(document).ready(function(){
     var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
     tabstrip.select(tabstrip.tabGroup.children("li:first"));
 });