使用HTML5的PhoneGap应用程序_Html_Cordova

使用HTML5的PhoneGap应用程序

html cordova

使用HTML5的PhoneGap应用程序,html,cordova,Html,Cordova,我正在建立一个网站，然后将转换成手机应用程序使用PhoneGap为3操作系统（iOS，Android和Windows手机）。我的网页的结构是这样的，它有3个垂直div。我已经使用媒体查询控制了这些div的宽度，它在桌面和Android模拟器上都运行良好。这意味着在桌面上，所有三个DIV将同时显示，但在移动应用程序上，我希望一次只显示一个DIV，当用户使用触摸屏水平滚动屏幕时，第二个DIV将显示在移动屏幕上，类似地，第三个DIV将使用触摸屏进一步滚动。简而言之，我希望每个DIV都是移动应用程序上的

我正在建立一个网站，然后将转换成手机应用程序使用PhoneGap为3操作系统（iOS，Android和Windows手机）。我的网页的结构是这样的，它有3个垂直div。我已经使用媒体查询控制了这些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>


我的网站
第一组
第二组
第三组

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

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

谢谢Keshav。我已经找到了一种仅使用媒体查询的解决方法。请告诉我如何使用jQuery Mobile在HTML5中实现刷卡事件。或者提供一些有用的链接。jQuery mobile已经有了大量的文档。是您正在查找的刷卡事件。