Question

我正在建立一个网站，然后使用PhoneGap for 3 OS（iOS，Android和Windows Phone）将其转换为移动应用程序。我的网页结构是这样的，它有3个垂直DIV。我使用Media-Queries控制了这些DIV的宽度，它在桌面和桌面上工作正常。 Android模拟器。这意味着在桌面上所有三个DIV将同时显示但在移动应用程序上我想一次只显示一个DIV，当用户使用触摸水平滚动屏幕时，第二个DIV将显示在移动屏幕上，类似地第三个DIV打开使用触摸进一步滚动。简而言之，我希望每个DIV都是移动应用程序的页面。

但它显示主屏幕上的所有三个div。我想知道如何控制我的网页，当它在桌面上被查看时，所有三个DIV将同时显示，当使用PhoneGap应用程序在移动设备上查看时，一次只能看到一个div。

希望我对你很清楚。我也粘贴HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" href="main.css" />   
    <script type="text/JavaScript" src="CommonFunctions.js"></script>
    <meta name="viewport" content="width=device-with, initial-scale=1, user-scalable=yes">  
</head>
<body>
    <div id="topContainer" class="container">
        <div id="topSectionHeating" class="topSectionHeating">          
            DIV1
        </div>

        <div id="topSectionHotWater" class="topSectionHotWater">            
            DIV2
        </div>

        <div id="topSectionSchedule"  class="topSectionSchedule">       
            DIV3
        </div>      
    </div>
</body>

Answer 1

你试过jQuery吗？您可以将onClick（）分配给按钮，并相应地显示/隐藏div。

如果您不熟悉jQuery，请从here开始，或者提供一些好的教程here

使用HTML5的PhoneGap应用程序

1 个答案: