jquery移动风格不起作用

Question

为什么我的网页看起来像这样？我无法找到问题

可以吗？

<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>

Answer 1

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

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

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

Answer 2

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

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

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