幻灯片页面转换

我想在div与jquery mobile之间应用幻灯片转换。我有以下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 hace显示：块。而当我点击链接的内容不会改变。

任何想法？

来源

2016-09-16 ramiromd

您是否正确包含jQuery和jQueryMobile。您的代码正在如下工作。

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

来源

2016-09-17 06:43:04 Homen

幻灯片页面转换

回答

相关问题