jquery移动样式不起作用答案

【问题标题】：jquery mobile style doesn't workjquery移动样式不起作用
【发布时间】：2014-03-05 14:28:29
【问题描述】：

为什么我的页面是这样的？我找不到问题

这样好吗？

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

HTML:

<div data-role="header" style="overflow: hidden;">
        <h1>I'm a header</h1>
        <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>

【问题讨论】：

您正在加载 jQM css 和 js 文件的最小化版本和开发版本。只加载一个或另一个（.min 可能是你想要的）。
好的，谢谢。但我仍然有同样的问题。

标签： jquery css jquery-mobile navbar

【解决方案1】：

使用任何外部小部件时，您需要添加data-theme="a" 或"b"。

正常行为，小部件从父 div 继承主题。但是，由于外部小部件的父级是 body 并且 body 没有收到任何主题，因此外部小部件应该是主题。

<div data-role="header" data-theme="a">
</div>

【讨论】：

我添加了数据主题和角色，但仍然不起作用：/
@Erdem 在head 中放置以下链接<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">、<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> 和最后一个<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>。
还是同样的问题。我的控制台没有错误？！
@Erdem 按钮“扫描”在您的图像中设置样式。确保 div data-role=page 中有元素并添加 data-theme=a。
谢谢 omar，我试了一下，现在可以了 :) 对你很有帮助

【解决方案2】：

检查您的 javascript 文件和 css 文件是否正确加载以及您的路径是否正常。你可能忘记了一个额外的 div ：

<div data-role="page">
</div>

这是包含所有 html 的主要 div。如果这些指针不起作用，请告诉我。

【讨论】：

是的，文件已正确加载，我有一个额外的 div，其中数据角色作为页面.. 但仍然无法正常工作