Mobile TabStrip - replace tabstrip HTML

Onclick of Settings tabstrip icon replaces tabstrip DIV HTML content with contents of Settings tabs div. It grabs the HREF from anchor tags for highlighting current tab.

by acforbes

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css">
<div data-role="view" id="tabstrip-home" data-title="Home" data-layout="mobile-tabstrip">
Home
    <p>Home - Stay on the current tabstrip and display text within the tabstrip-home view.</p>
    <p>Calendar - Stay on the current tabstrip and display text within the tabstrip-calendar view.</p>
    <p>Customers - load the customer.htm file into the tabstrip-customers view (no file reference in this jsfiddle, so nothing happens as expected).</p>
    <p>Settings - Change the tabstrip to a new Settings tabstrip set and display text within the tabstrip-settings view.</p>
    <p>Problems: The tabstrip disappears on icons not setup as separate tabstrip sets, cannot get back to Home tabstrip set after clicking Settings, and tabstrip disappears after consecutive clicks (i.e. Home -&gt; Settings -&gt; Home -&gt; Settings).
</div>

<div data-role="view" id="tabstrip-calendar" data-title="Calendar" data-layout="mobile-tabstrip">
Calendar
</div>

<div data-role="view" id="tabstrip-customers" data-title="Customers" data-layout="mobile-tabstrip">
Customers
</div>

<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">
Settings
    <p>Note that the tabstrip disappears when clicking Home then Settings again (first icon clicked after getting here), which appears to just be a hide/show bug in the code.</p>
</div>

<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
Profile
</div>

<div data-role="view" id="tabstrip-users" data-title="Users" data-layout="mobile-tabstrip">
Users
</div>

<div data-role="layout"...

CSS

#footer-tabs-home, #footer-tabs-settings { display: none;}
p { font-weight: normal; margin: 10px 5px; }

JavaScript

var app = new kendo.mobile.Application(document.body);
  var kTabStrip;
  $(document).ready(function () {
    var tabStrip = $("#footer-tabs");
    var tabStripNewID = "footer-tabs-home";
    var tabStripNew = $("#" + tabStripNewID);
    tabStrip.html(tabStripNew.html());
    kTabStrip = tabStrip.kendoMobileTabStrip({
      select: tabSelect
    });
  });

  function tabSelect(e) {
    //e.preventDefault();
    var tabStrip = $("#footer-tabs");
    var tabStripNewID = $(e.item).attr("tabset");
    var tabStripNew = $("#" + tabStripNewID);

    tabStrip.html(tabStripNew.html());
    kTabStrip = tabStrip.kendoMobileTabStrip({
      select: tabSelect
    });
  }