我正在学习如何使用 jquery mobile 编写我的第一个移动网站。
我在页面的页眉和页脚都有导航栏,每个导航栏有 2 个链接。在此之下,我制作了带有 ID 的 div,我想将这些 ID 加载到 #loadcontent div 中,使用准备好的 .load() 函数替换旧内容,它们确实如此,但之后在我的旧页眉和页脚上加载了重复的导航栏,嘎吱作响的屏幕。
我怎样才能防止它这样做?
在 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>