Kendo UI tabstrip 导航到空白页面答案

【问题标题】：KendoUI tabstrip navigates to blank pageKendo UI tabstrip 导航到空白页面
【发布时间】：2013-05-10 12:48:11
【问题描述】：

我正在使用从 KendoUI 页面获取并适用于我的应用程序的自定义标签条。\

它有 3 个选项卡（home、startOfDay 和 stop）。每个选项卡都转到一个 HTML 页面。

问题是这样的，我可以毫无问题地从主页导航到其他选项卡之一，但之后如果我尝试导航到另一个选项卡，它只会转到空白页。

这是我的布局代码。

<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">FnF Driver Application</div>
    </header>
    <!--View content will render here-->
    <footer data-role="footer">
        <div data-role="tabstrip" id="custom-tabstrip">
            <a data-icon="home" href="home.html">Home</a>
            <a data-icon="globe" href="startOfDay.html">Start Of Day</a>
            <a data-icon="toprated" href="stops.html">Stops</a>
        </div>
    </footer>
</section>

每个页面都包含在一个看起来像这样的 div 中...

<body>
    <div id="home/startOfDay/stops" data-role="view" data-layout="default">
     ~Content goes here~
    </div>
</body>

任何帮助将不胜感激。

谢谢！！！

【问题讨论】：

只是一个更新...我拿出标签条并制作了一个菜单页面，其中有几个独立按钮，编码如下 -
本质上和 kendoui.com/forums/mobile/general-discussions/…的问题一样，但规模更大……

标签： kendo-ui kendo-mobile

【解决方案1】：

尝试从您的视图中删除<body> 标签？我认为当 Kendo UI Mobile 在远程视图中读取时，它会将其注入到页面 DOM 中，并且有另一个 <body> 标记可能会搞砸。

【讨论】：

【解决方案2】：

我在某处读到，布局必须至少定义一个视图才能正常工作，即使它是空白视图。尝试放入空白视图。

<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">FnF Driver Application</div>
    </header>
    <!--View content will render here-->
    <div data-role="view"></div>
    <footer data-role="footer">
        <div data-role="tabstrip" id="custom-tabstrip">
            <a data-icon="home" href="home.html">Home</a>
            <a data-icon="globe" href="startOfDay.html">Start Of Day</a>
            <a data-icon="toprated" href="stops.html">Stops</a>
        </div>
    </footer>
</section>

【讨论】：