0

jquery mobile に含まれるページを非表示にするにはどうすればよいですか。サイトのモバイル バージョンとデスクトップ バージョンを用意したいのですが、モバイル バージョンが自動的に読み込まれます。これを変更するにはどうすればよいですか？

ここにコード：

<!DOCTYPE html>
<html>
    <head>
        <!-- For Mobile Devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="../global/global.css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div >
        <!-- The View Page (Summary) -->
        <div data-role="page" id="summary">
            <div data-role="header">
            </div>
            <div data-role="main" class="ui-content">
                <div class="jumbotron container">
                    <center>
                        <img src="removeLogo.jpg" />
                    </center>
                    <h2 class="txt-center"><u>Controls</u></h2>
                    <a class="btn btn-default">View</a>
                </div>
            </div>
            <div data-role="footer">
            </div>
        </div>

        <div data-role="page" id="summary">
            <div data-role="header">
            </div>
            <div data-role="main" class="ui-content">
                <div class="jumbotron container">
                    <center>
                        <img src="removeLogo.jpg" />
                    </center>
                    <h2 class="txt-center"><u>Controls</u></h2>
                    <a class="btn btn-default">View</a>
                </div>
            </div>
            <div data-role="footer">
            </div>
        </div>
    </bod

y>

4

2 に答える 2

6

スクリプトの実行時には、DOM の準備ができていません。DOM対応のイベント ハンドラに入れます。

$(function () {
    // Interact with the DOM in here
});

// Or, the slightly longer version
$(document).ready(function () {
    // Interact with the DOM in here
});

または、JavaScript を本文の最後に移動します (終了タグの直前</body>が一般的な場所ですが、参照する必要がある要素の後のどこでも機能します)。そうすることで、スクリプトが解析されるまでに、ブラウザーは既に前のマークアップを解析しており、ほぼ完全な DOM ツリーにアクセスできるようになっています。

于 2012-11-04T20:56:28.227 に答える
0

Ok 。その理由は、#left-placeholder に到達しようとしているが、まだ読み込まれていないためだと思います。

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
        <LINK href="../styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
            <div id="leftcol">
                <a href="practice.html"><div class ="left-column-item">Practice!</div></a>
                <a href="aboutUs.html"><div class ="left-column-item">About Us!</div></a>
                <a href="contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
            </div>
        <div id="left-placeholder">abc</div>
        <div id ="left-pusher"></div>
        <div id ="content">Math Practice Site <br> hello</div>
    </body>
    <script type ="text/javascript">
        alert($('#left-placeholder').html());
    </script>
</html>

その下にスクリプトを配置すると、問題ないはずです。または、次のようにページが読み込まれた後にスクリプトを開始します。

$(document).ready(function(){
     alert($('#left-placeholder').html());
});

ソース: http://api.jquery.com/ready/

于 2012-11-04T21:00:47.137 に答える