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>


效果图:

HTML使用js在同一界面刷新,实现局部刷新


HTML使用js在同一界面刷新,实现局部刷新