JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<h1>IE Enemy</h1>
<div class="ts">
<ul></ul>
</div>
<h1>IE Friendly</h1>
<div class="ts-ie-friendly">
<ul><li>Tab 0</li><li>Tab 1</li><li>Tab 2</li></ul>
<div><p>Dummy text for tab 0</p></div>
<div><p>Dummy text for tab 1</p></div>
<div><p>Dummy text for tab 2</p></div>
</div>
CSS
body {
font-family: Verdana, sans-serif;
font-size: 12px;
}
JavaScript
$(function () {
var ts = createTabstrip();
for (var i = 0; i < 3; i++) {
ts.append({
encoded: false,
content: '<p>Dummy text for tab ' + i + '</p>',
text: 'Tab ' + i
});
}
ts.select(1);
$('.ts-ie-friendly').kendoTabStrip().data('kendoTabStrip').select(1);
});
function createTabstrip() {
return $('.ts').kendoTabStrip().data("kendoTabStrip");
}