0

我正在构建一个网站，然后将使用 PhoneGap 为 3 个操作系统（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>

4

1 回答 1

0

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

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

于 2012-10-09T15:55:49.017 回答