Jquery 更新视图显示中tabstrip上的选项卡

我无法让这段简单的代码正常工作。我做错了什么？我希望在导航到此视图时更改选项卡

<div id="foo" data-role="view" data-show="changeTab">
  <div data-role="footer">
    <div data-role="tabstrip">
      <a href="#foo" data-icon="contacts">foo</a>
      <a href="#bar" data-icon="contacts">bar</a>
    </div>
  </div>
</div>

<script>
var app = new kendo.mobile.Application();
function changeTab() {
  var tabstrip = app.view().footer.find(".km-tabstrip").data("kendoMobileTabStrip");
  tabstrip.switchByFullUrl("#bar"); //activate second tab
}
</script>

---

或者在此处尝试：

当导航到带有选项卡URL的视图时，Kendo UI Mobile TabStrip会自动更新。在这种情况下不需要额外的代码。检查已修改的

---

根据您的回答-如果您有多个视图和一个Url，您可以使用select方法手动导航到新视图，该视图将正确选择选项卡。检查新的。

这很有帮助，值得了解。如果视图本身有一个不同的id，例如一个id为new的视图，我希望选项卡从foo更改为bar，那又如何？我有一个视图可以属于tabfoo或bar，这取决于它加载的一些JSON数据。

<div id="foo" data-role="view">
  <div data-role="footer">
    <div data-role="tabstrip">
      <a href="#foo" data-icon="contacts">foo</a>
      <a href="#bar" data-icon="contacts">bar</a>
    </div>
  </div>
</div>

<div id="bar" data-role="view">
  <div data-role="footer">
    <div data-role="tabstrip">
      <a href="#foo" data-icon="contacts">foo</a>
      <a href="#bar" data-icon="contacts">bar</a>
    </div>
  </div>
</div>

<script>
  var app = new kendo.mobile.Application();
</script>