Question

我正在尝试使用Jquery Mobile在div之间应用幻灯片转换。我有以下HTML结构：

// More content ... No jQuery Mobile needs
<div data-role="page">
   <a href="#p1" data-transition="slide">Go to #1.</a>
   <a href="#p2" data-transition="slide">Go to #2.</a>
</div>

<div id="p1" data-role="page">
   <div data-role="main">I am P 1</div>
</div>

<div id="p2" data-role="page">
   <div data-role="main">I am P 2</div>
</div>

我从W3School demo复制了结构。但对我来说不起作用。首先，＃p1和＃p2显示：阻止。当我点击链接时，内容不会改变。

有什么想法吗？

Answer 1

您是否正确包含了jQuery和jQueryMobile。您的代码正常运行如下。

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    <div data-role="page">
       <a href="#p1" data-transition="slide">Go to #1.</a>
       <a href="#p2" data-transition="slide">Go to #2.</a>
    </div>
    
    <div id="p1" data-role="page">
       <div data-role="main">I am P 1</div>
    </div>
    
    <div id="p2" data-role="page">
       <div data-role="main">I am P 2</div>
    </div>
    
    
    </body>
    </html>

＆＃13;

幻灯片页面转换

1 个答案: