0

jquery mobile を使用して、最初のモバイル Web サイトをコーディングする方法を学んでいます。

ページのヘッダーとフッターの両方にナビゲーション バーがあり、それぞれに 2 つのリンクがあります。その下で、準備ができた .load() 関数を使用して古いコンテンツを置き換える #loadcontent div にロードしたい ID を持つ div を作成しましたが、その後、古いヘッダーとフッターの上に複製されたナビゲーション バーが読み込まれます。画面をざわめく。

これを防ぐにはどうすればよいですか？
skroovy.com/index2.html (モバイル ブラウザー向け) でご自分の目で確かめてください
。

<!DOCTYPE html>
<html> 
<head>  
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

    <link rel="stylesheet" href="css/skroovystyles.css">

    <title>Skroovy!</title>     
</head>


<body>
<script>
$(document).ready(function() {
    $('#topnav a').click(function() {
        var url=$(this).attr('href');
        $('#loadcontent').load(url);
        return false;
    });

    $('#btmnav a').click(function() {
        var url=$(this).attr('href');
        $('#loadcontent').load(url);
        return false;
    }); 
}); // end ready
</script>


<!-- Home (not logged in) -->
<div id="home" data-role="page">

 <div data-theme="a" data-role="header" data-position="fixed">
        <div id="topnav" data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#login" data-transition="fade" data-theme="" data-icon="star">
                        Log In
                    </a>
                </li>
                <li>
                    <a href="#entercode" data-transition="fade" data-theme="" data-icon="check">
                        Enter Code
                    </a>
                </li>
            </ul>
        </div>
 </div>

 <div data-role="content">
 <div id='loadcontent'>
    <div style=" text-align:center">
            <img style="width: 100%; height: px" src="images/Skroovy logo large.png">
        </div>
        <div style=" text-align:center">
            <img style="width: 100%; height: px" src="images/headerlogo.png">
        </div>
 </div>
 </div>

 <div data-theme="a" data-role="footer" data-position="fixed">
       <div data-role="navbar" data-iconpos="top" id='btmnav'>
            <ul>
                <li>
                    <a href="index2.html#about" data-icon="info">
                        About
                    </a>
                </li>
                <li>
                    <a href="#newuser" data-transition="fade" data-theme="" data-icon="plus">
                        New User
                    </a>
                </li>
            </ul>
        </div>
 </div>
</div>



<div id='login'>
    <br><br><br><br>
    <h3>Log In Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='entercode'>
    <br><br><br><br>
    <h3>Enter Code Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='about'>
    <br><br><br><br>
    <h3>Skroovy is the awesome stuff. You should really buy this Skrooviness now.</h3>        
        <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

<div id='newuser'>
    <br><br><br><br>
    <h3>New User Register Page</h3>
                <a id="homelogo" href="#home" data-transition="fade">
            <div style=" text-align:center">
                <img id="homelogo" style="width: 100%; height: px" src="images/headerlogo.png">
            </div>
        </a>
</div>

</body>
</html>
4

1 に答える 1