0
我的頁面html文件中有三個頁面。我在按鈕上點擊頁面現在我正在改變頁面的轉換，但當頁面被改變時，頁面轉換之間會出現空白區域，並且還會產生混亂效果，我添加了所有javascript幫助圖書館應用了所有方法，但不工作。小時和小時的嘗試都是徒勞的。另一個問題是，當我改變我的頁面，似乎onPageChange頁面的佈局設置一次又一次地改變。任何身體可以幫助我解決這個問題？頁面轉換不能正常工作
流程是：
1 ------壹（主頁---第一次加載頁）此頁面有兩個按鈕和背景圖像
2頁------兩（此頁有一些輸入型圖像以及可以追溯到主頁按鈕）
3 ------三版（此頁也有一定的div和一個按鈕，返回到主頁頁）
<meta content="width=device-width,initial-scale=0.50, user-scalable=no"
name="viewport">
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one">
<div id='home' >
<input type="image" id='button_1' src="images/image_1.png" onclick="first_function();"/>
<input type="image" id='button_2' src="images/image_2.png" onclick="second_function();" />
</div>
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two">
<div id="fullpage">
<img id="player" src="./images/rect.png"
style="margin-left: 65px" />
<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 65px;"
onclick="myFunction('1','1');" id="1" value=" " name=""/>
<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 30px;"
onclick="myFunction('2','1');" id="2" value=" " name=""/>
<input type="image" class="stage"
style="width: 80px; height: 90px; margin-left: 50px;"
onclick="myFunction('3','1'); " id="3" value=" " name=""/>
<div id="home-btn">
<input type="image" id="home"
style="position: absolute; width: 90px; height: 90px; margin-left: 40px; margin-top: 210px;"
src="images/home.png"
value=" " name="home" onClick="home_function();"/>
</div>
</div>
</div><!-- /page two -->
<!-- Start of second page: #three -->
<div data-role="page" id="three">
<div style='display: block; background-image: url(./images/imagee1.jpg);' >
<button class="stage1"
style="width: 280px; height: 130px; margin-top: 25px; margin-left: 40px; background: transparent;"
onclick="audio('11')" ></button>
<button class="stage1"
style="width: 280px; height: 340px; margin-top: 20px; margin-left: 960px; background: transparent;"
onclick="audio('22')" ></button>
<button id="home" id="home"
style="position: absolute; width: 90px; height: 90px; margin-left: 40px; margin-top: 255px; background: url('./images/home.png');" onClick="home_function();"></button>
<button class="stage1"
style="width: 220px; height: 290px; margin-top: 435px; margin-left: 40px; background: transparent;"
onclick="audio('33')"></button>
<button class="stage1"
style="width: 210px; height: 290px; margin-top: 435px; margin-left: 300px; background: transparent;"
onclick="audio('44')" ></button>
<button class="stage1"
style="width: 240px; height: 290px; margin-top: 435px; margin-left: 550px; background: transparent;"
onclick="audio('55')"></button>
<button class="stage1"
style="width: 415px; height: 290px; margin-top: 435px; margin-left: 830px; background: transparent;"
onclick="audio('66')"></button>
</div>
</div>
Javascript:
<script>
function second_function()
{
$.mobile.changePage('#two',{transition: 'slide',allowSamePageTransition: true});
}
function home_function()
{
$.mobile.changePage('#one',{transition: 'slide',reverse : true,allowSamePageTransition: true});
}
function second_function()
{
$.mobile.changePage('#three',{transition: 'slide',allowSamePageTransition: true});
}
</script>
我想你使用jQuery Mobile的，不是嗎？ – mutex36
是的，我使用jQuery Mobile的 – User42590