2016-09-16 3 views
0

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 해스 디스플레이 : 블록. 링크를 클릭하면 콘텐츠가 변경되지 않습니다.

아이디어가 있으십니까?

답변

0

jQueryjQueryMobile을 올바르게 포함 시켰습니까? 귀하의 코드는 다음과 같이 으로 작동합니다.

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