-3

我创建了 2 页。一个叫做home.html，它链接到products.html。当我对此进行测试时，我打开home.html并点击链接到products.html. 但是 javascript inproducts.html不起作用（请参见下面的代码）。

这是products.html： 

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>
            page1
        </h1>
    </div>
    <div data-role="content">
        Content1</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active ui-state-persist">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page1-->

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>
            page2
        </h1>
    </div>
    <div data-role="content">
        Content2</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2" class="ui-btn-active ui-state-persist">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page2-->

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>
            page3
        </h1>
    </div>
    <div data-role="content">
        Content3</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3" class="ui-btn-active ui-state-persist">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page3-->

感谢用户 ali-carikcioglu，现在可以在http://jsfiddle.net/JkYSa/上找到一个工作小提琴。

有人可以向我解释为什么这不起作用吗？

4

1 回答 1

0

从您在 products.html 中使用 jQuery Mobile 的情况来看。由于您发布的小提琴都指向同一个东西并且那里没有适当的 html/js，我只能假设您遇到的问题是您没有将 products.html 指向 jQuery 和 jQuery 移动源。

把它加到你的头上

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

http://learn.jquery.com/jquery-mobile/getting-started/ 可能是学习如何使用框架的好地方

于 2013-08-11T05:58:59.747 回答