Question

我创建了2页。一个名为home.html，其链接到products.html。当我对此进行测试时，请打开home.html，然后点击指向products.html的链接。但是products.html中的javascript不起作用（请参阅下面的代码）。

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

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

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

Answer 1

从您在products.html中使用jQuery Mobile的内容来看。既然你发布的小提琴都指向同一个东西，并且没有正确的html / js，我只能假设你遇到的问题是你没有将products.html指向jQuery和jQuery移动源。 / p>

将此添加到您的脑袋

<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/ 可能是学习如何使用框架的好地方

如何使用javascript控制标签页？

1 个答案: