0

我正在尝试做一个简单的 jquery 移动导航栏，如下所示：

http://demos.jquerymobile.com/1.4.0/tabs/#&ui-state=dialog

我遇到的问题是，当我链接到一个 html 文件时，它加载时没有任何样式或“jquery 移动性”。这是我的片段

索引.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="Content/jquery.mobile-1.4.0.min.css" />
</head>
<body>
    <div id="homePage" data-role="page">
        <div data-role="header" data-position="fixed" >
            <h1>Header</h1>
        </div>
        <div data-role="tabs" id="tabs">
            <div data-role="navbar" >
                <ul>
                    <li><a href="maps.html" data-ajax="false">Map</a></li>
                    <li><a href="#events">Events</a></li>
                </ul>
            </div>
            <div data-role="content">
                <div id="events">
                    <ul data-role="listview" data-inset="true" data-divider-theme="b">
                        <li data-role="list-divider">1</li>
                        <li><a href="#">a</a></li>
                        <li><a href="#">b</a></li>
                        <li data-role="staclist-divider">2</li>
                        <li><a href="#">c</a></li>
                        <li><a href="#">d</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <script src="Scripts/jquery-2.1.0.min.js"></script>
    <script src="Scripts/jquery.mobile-1.4.0.min.js"></script>
</body>
</html>

地图.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-divider-theme="a">
                <li data-role="list-divider">1</li>
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li data-role="list-divider">2</li>
                <li><a href="#">c</a></li>
                <li><a href="#">d</a></li>
            </ul>
        </div>

    </body>
    </html>

#events id 加载得很好。我期待加载 maps.html 的内容（与#events div 相同）。也许我误解了 jquery mobile 的工作原理，但演示使它看起来像我正在做的事情是可能的。相反，我只是得到这样的东西

无样式

当我期待这个时：

风格

我知道我可以把它全部放在一页上，但我真的不希望这样做。我也希望不要在每一页上重复标题。这似乎是一个不错的解决方案，但我觉得我可能没有正确使用这些工具。我尝试过谷歌搜索并找到了其他示例，但我不确定为什么我的不工作。

4

1 回答 1

0

我认为您的 maps.html 应该如下所示：

<div class="tablist-content" data-role="content">
    <ul data-role="listview" data-inset="true" data-divider-theme="a">
        <li data-role="list-divider">1</li>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li data-role="list-divider">2</li>
        <li><a href="#">c</a></li>
        <li><a href="#">d</a></li>
    </ul>
</div>

无需放置标准的 HTML 标头。

于 2014-02-12T16:35:29.743 回答