0

3つのOS（iOS、Android、Windows Phone）用のPhoneGapを使用してモバイルアプリに変換されるWebサイトを構築しています。私の Web ページの構造は、3 つの垂直 DIV を持つようなものです。Media-Queries を使用してこれらの DIV の幅を制御しましたが、デスクトップと Android Emulator の両方で正常に動作しています。これは、デスクトップでは 3 つの DIV すべてが同時に表示されることを意味しますが、モバイル アプリでは一度に 1 つの DIV のみを表示したいので、ユーザーがタッチを使用して画面を水平方向にスクロールすると、2 番目の DIV がモバイル画面に表示され、同様に 3 番目の DIV が表示されます。タッチでさらにスクロール。つまり、各 DIV をモバイル アプリのページにしたいと考えています。

しかし、メイン画面に 3 つの div すべてが表示されています。デスクトップで表示すると 3 つの DIV すべてが同時に表示され、PhoneGap アプリケーションを使用してモバイルで表示すると一度に 1 つの div のみがユーザーに表示されるように Web ページを制御する方法を知りたいです。

私があなたにはっきりしていることを願っています。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 に答える