今天用jquery mobile做了一个导航,里面有两个page,原以为点击导航的时候不会重新请求服务器,因为所有数据第一次请求都已加载好了,以为会作为一个锚点跳转,但调试时发现每点一次导航,都会重新请求服务器,求解。
<body> <div data-role="page" data-theme="b" id="info"> <div data-role="header"> <h1> 比赛排名</h1> </div> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home">比赛详情</a></li> <li><a href="#ranklist" class="ui-btn-active" data-transition="slide" data-icon="arrow-r"> 比赛排名</a></li> </ul> </div> <div data-role="content"> </div> @Html.Partial("_Footer") </div> <div data-role="page" data-theme="b" id="rankList"> <div data-role="header"> <h1> 比赛排名</h1> </div> <div data-role="navbar"> <ul> <li><a href="#info" data-icon="home">比赛详情</a></li> <li><a href="#" class="ui-btn-active" data-transition="slide" data-icon="arrow-r"> 比赛排名</a></li> </ul> </div> <div data-role="content"> </div> @Html.Partial("_Footer") </div> </body>
<div data-role="navbar">
<ul>
<li><a href="#info" data-icon="home">比赛详情</a></li>
<li><a href="#rankList" data-icon="arrow-r">比赛排名</a></li>
</ul>
</div>
无奈,只有把href="#"删除,然后用onclick自己来控制显示隐藏