正如标题所说,我有一个 html 5 应用程序,它使用 jqmobile 和 pages 来进行页面转换。
过渡效果很好……唯一的问题是第二页中的所有元素都可以在第一页上看到!切换页面后,过渡效果很好,只能看到第二个 div 中的元素。
有谁知道发生了什么?也许我错过了一个显示:某处没有?
编辑这是我的一些代码。
<div data-role="page" id="page-one" data-title="Page 1" style = "padding-top:50px;">
<div class = "pagecontent">
<div id="nav">
navbar
</div>
<div id="innerdiv">
<div id="scroller" style="width:100%;height:100%;">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
</div>
<div id="container49">
<div class="circlecontainer" id="circle" >
<div class = "gymname">
Rec. Hall
</div>
<div class="animatedcircle">
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>
<div class="stationarycircle">
<canvas id="myCanvas2" width="250" height="250"></canvas>
</div>
<div class="inner" id = "innerfour">
<div class="count" id="count"><span id="counter"></span><span id="percent"></span></div>
<div class="line"></div>
<div class="fraction" id="fraction"><span id="attend"></span><span id="max"></span></div>
</div>
<div class = "oc" id ="oc1">
CLOSED
</div>
</div>
<div class="circlecontainer" id="circle2" onclick="predictor(1)">
<div class = "gymname">
White Building
</div>
<div class="animatedcircle">
<canvas id="myCanvas3" width="250" height="250"></canvas>
</div>
<div class="stationarycircle">
<canvas id="myCanvas4" width="250" height="250"></canvas>
</div>
<div class="inner" id = "innerthree">
<div class="count" id="count2"><span id="counter2"></span><span id="percent2"></span></div>
<div class="line"></div>
<div class="fraction" id="fraction2"><span id="attend2"></span><span id="max2"></span></div>
</div>
<div class = "oc" id="oc2">
CLOSED
</div>
</div>
<div class="circlecontainer" id="circle3" onclick="predictor(2)">
<div class = "gymname">
IM Building
</div>
<div class="animatedcircle">
<canvas id="myCanvas5" width="250" height="250"></canvas>
</div>
<div class="stationarycircle">
<canvas id="myCanvas6" width="250" height="250"></canvas>
</div>
<div class="inner" id = "innertwo">
<div class="count" id="count3"><span id="counter3"></span><span id="percent3"></span></div>
<div class="line"></div>
<div class="fraction" id="fraction3"><span id="attend3"></span><span id="max3"></span></div>
</div>
<div class = "oc" id="oc3">
CLOSED
</div>
</div>
<div class="circlecontainer" id="circle4" onclick="predictor(3)">
<div class = "gymname">
Fitness Loft
</div>
<div class="animatedcircle">
<canvas id="myCanvas7" width="250" height="250"></canvas>
</div>
<div class="stationarycircle">
<canvas id="myCanvas8" width="250" height="250"></canvas>
</div>
<div class="inner" id = "innerone">
<div class="count" id="count4"><span id="counter4"></span><span id="percent4"></span></div>
<div class="line"></div>
<div class="fraction" id="fraction4"><span id="attend4"></span><span id="max4"></span></div>
</div>
<div class = "oc" id = "oc4">
CLOSED
</div>
</div>
</div><!-- content 49 -->
</div><!-- page content -->
</div><!-- poopie -->
</div><!-- scroller -->
<a href="#page-two" id="two" data-transition="slide"></a>
</div>
<div data-role="page" id="page-two" data-title="Page 2">
<div class = "pagecontent">
<div id="date">0/0/00</div>
<div id = "pattend">Predicted Attendance:</div>
<div id="percent"><span id="percentage">0</span>%</div>
<div id="displayattend">0</div>
<div id="wrapping">
<div id="linediv">
<div id="time"><span id="hours"></span>:<span id="min"></span><span id="ampm"> </span></div>
<div id="line"></div>
</div>
<div id="chart1" style="height:100%;width:100%;"></div>
</div><!-- wrapping -->
</div><!-- Page Content -->
</div>