HTML使用js在同一界面刷新,实现局部刷新
index.js
function opens(obj) {
for (var i = 1; i <= 13; i++) {
if (i === obj) {
document.getElementById("con" + i).style.display = "block";
} else
document.getElementById("con" + i).style.display = "none";
}
}
index.html
<head>
<script type="text/javascript" src="../js/index.js"></script> //引入index.js
</head>
<body>
<ul id="ul1">
<li onclick="opens(1)">我的动向</li> /* li也可换成其他标签,如a */
<li onclick="opens(2)">网友动向</li>
<li onclick="opens(3)">游记</li>
<li onclick="opens(4)">问答</li>
<li onclick="opens(5)">收藏</li>
<li onclick="opens(6)">点评</li>
</ul>
<div id="con1"> /* 初始显示界面 id="con1"与 onclick="opens(1)"对应*/
</div>
<div id="con2" style="display:none;"> /* 初始隐藏界面 */</div>
<div id="con3" style="display:none;"> /* 初始隐藏界面 */
</div>
<div id="con4" style="display:none;"> /* 初始隐藏界面 */
</div>
<div id="con5" style="display:none;"> /* 初始隐藏界面 */
</div>
</body>
效果图: