现在这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>ESocial</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="javascript/jquery-1.7.1.min.js"></script>
<script src="javascript/jquery.mobile-1.1.0.min.js"></script>
<script src="esocial.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="javascript/jquery-ui.min.js"></script>
<script>
$(document).ready(function(event) {
$("#datepicker").datepicker();
});
function function1(){
document.getElementById("datepicker").blur();
if(document.getElementById("ui-datepicker-div")!= null){
document.getElementById("ui-datepicker-div").focus();
}
//alert("The button1 lost its focus");
}
function function3(){
setTimeout('window.KeyBoard.hideKeyBoard()',1000);
//;
}
</script>
<script>
$(document).ready(function() {
$("#datepickerto").datepicker();
});
function function2(){
document.getElementById("datepickerto").blur();
if(document.getElementById("ui-datepicker-div") !=null)
document.getElementById("ui-datepicker-div").focus();
}
</script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header">
<h1>ESocial</h1>
<a href="#login" data-icon="" class="ui-btn-right" onclick="navigator.app.exitApp();return false;">Exit</a>
</div><!-- header -->
<form id="waplogin" action="menu.html" >
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Username</p>
</div>
<div id="divright">
<input style="width: 80%;" id="username"
name="username" type="text" />
</div>
</div>
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Password</p>
</div>
<div id="divright">
<input style="width: 80%;" id="password"
name="password" type="password" />
</div>
</div>
<div id="divleftButton">
<!-- <a class="submitbutton " onclick="" href="#menu">Register</a> -->
<a class="bluebutton" href="#registration" onclick="">Register</a>
</div>
<div id="divrightButton">
<!-- The white class uses the 29x30 whiteButton PNG image to build the iPhone button -->
<a class="bluebutton" href="#menu" onclick="loginSubmit(); return false;">Login</a>
</div>
</form>
</div>
<!-- Registration Page -->
<div data-role="page" id="registration">
<div data-role="header" data-position="inline">
<a href="#login" data-icon="back">Back</a>
<h1>Register</h1>
<!-- <a href="#" data-icon="check" onclick="submitLeave(); return false;">Save</a> -->
</div>
<form id="registration" action="">
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">First Name</p>
</div>
<div id="divright">
<input style="width: 90%;" id="firstName"
name="firstName" type="text" />
</div>
</div>
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Last Name</p>
</div>
<div id="divright">
<input style="width: 90%;" id="lastName"
name="lastName" type="text" />
</div>
</div>
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Email Id</p>
</div>
<div id="divright">
<input style="width: 90%;" id="emailId"
name="emailId" type="text" />
</div>
</div>
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Mobile No.</p>
</div>
<div id="divright">
<input style="width: 90%;" id="mobileNo"
name="mobileNo" type="text" />
</div>
</div>
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Password</p>
</div>
<div id="divright">
<input style="width: 90%;" id="registrationPass"
name="registrationPass" type="password" />
</div>
</div>
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Confirm Password</p>
</div>
<div id="divright">
<input style="width: 90%;" id="confPass"
name="confPass" type="password" />
</div>
</div>
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Date of Birth</p>
</div>
<div id="divright">
<input style="width: 90%;" id="dateOfBirth" name="dateOfBirth" type="text" />
</div>
</div>
<div style="vertical-align: middle;">
<div id="divleft">
<p class="plabel">Gender</p>
</div>
<div id="divright">
<select style="width: 90%;" name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<!-- submit button of registration -->
<div id="divsubmitbutton">
<br> <a class="submitbutton ui-link"
onclick="register(); return false;" href="#menu">Submit</a>
</div>
</form>
</div>
<!-- Main Menu -->
<div data-role="page" id="mainMenu">
<div data-role="header" data-position="inline">
<!-- <a href="#login" data-icon="back">Back</a> -->
<h1>Main Menu</h1>
<!-- <a href="#" data-icon="check" onclick="submitLeave(); return false;">Save</a> -->
<a href="#login" data-icon="logout" class="ui-btn-right" onclick="navigator.app.exitApp();return false;">Logout</a>
</div>
Main menu
</div>
</body>
</html>
问题 a）当点击注册时，它会加载注册页面，但不显示任何内容，直到我刷新然后我可以看到页面内容，是的，浏览器上的URL更改为（/login.html#registration）
同样是当我尝试加载主菜单时
b）即使数据图标属性
，也无法在设置中看到任何数据图标c）如何通过jquery显示页面，请不要指定更改div样式为内联或显示无，我还需要其他东西。例如..我在脚本中调用了一个方法，它应该隐藏一个页面并根据我对服务器的响应进行显示
另外，我是jquery / javascript开发的新手，所以一步一步告诉所有内容
答案 0 :(得分：0)
首先我才知道，这是firefox的一个问题，以下代码在Google Chrome中运行良好
$.mobile.changePage("#mainMenu",{allowSamePageTransition: true });
还有以下css文件，如果你想加载同一页面的元素
，那是必须的