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

客官°小女子只卖身不卖艺 2022-05-24 02:49 195阅读 0赞

**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 οnclick="opens(1)">我的动向</li>   /\* li也可换成其他标签，如a \*/  
<li οnclick="opens(2)">网友动向</li>  
<li οnclick="opens(3)">游记</li>  
<li οnclick="opens(4)">问答</li>  
<li οnclick="opens(5)">收藏</li>  
<li οnclick="opens(6)">点评</li>

</ul>

<div id="con1">  /\* 初始显示界面  id="con1"与  οnclick="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>

效果图：

![20180518195229886][]

![20180518195244529][]

[20180518195229886]: /images/20220524/6ac6e3c96ee742eb89942f5124d249c8.png
[20180518195244529]: /images/20220524/948396490d9f4e8ca7bca180a2a8047f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 实现局部组件刷新

在 vue 项目里想实现组件的局部刷新，我用到过的方法整理了一下： 1、 provide / inject 方法使用 v-if 方法来控制 router-view 的

我不是女神ヾ/ 2023年01月03日 04:57/ 0 赞/ 217 阅读

相关 HTML中使用Ajax进行局部刷新页面

HTML中使用Ajax进行局部刷新页面，使用JS将数据发送到后台 -------------------- 1.在HTML页面中使用js脚本将请求数据发送给后台ser

约定不等于承诺〃/ 2022年07月16日 06:48/ 0 赞/ 434 阅读

相关 ajax 局部刷新

1、jsp网页文件代码 <%@ page language="java" contentType="text/html; charset=utf-8" pageEnc

骑猪看日落/ 2022年06月11日 05:55/ 0 赞/ 299 阅读

相关 HTML使用js在同一界面刷新，实现局部刷新

index.js function opens(obj) \{ for (var i = 1; i <= 13; i++) \{ if (i === ob

客官°小女子只卖身不卖艺/ 2022年05月24日 02:49/ 0 赞/ 196 阅读

相关使用AjaxAnywhere实现页面局部刷新

前言页面局部刷新是日常工作中使用的很多的功能，通常会借助jQuery的load/get/post/ajax方法，或者使用jquery.form.js的ajaxSubmi

落日映苍穹つ/ 2022年05月14日 01:30/ 0 赞/ 347 阅读

相关 HTML页面局部刷新的实现代码

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

系统管理员/ 2022年04月25日 00:32/ 0 赞/ 545 阅读

相关 HTML页面局部刷新的实现代码

事件响应刷新：有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素，通过DOM方法或jQuery方法监听页面事件，获取用户请求； 2、通过Aja

桃扇骨/ 2021年11月01日 18:40/ 0 赞/ 697 阅读

相关 HTML页面局部刷新的实现代码

事件响应刷新：有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素，通过DOM方法或jQuery方法监听页面事件，获取用户请求； 2、通过Aja

雨点打透心脏的1/2处/ 2021年11月01日 18:16/ 0 赞/ 520 阅读

相关 jquery实现局部刷新Iframe

1，reload 方法，该方法强迫浏览器刷新当前页面。　　语法：location.reload(\[bForceGet\]) 　　参数： bForceGet，可选参数，

系统管理员/ 2021年09月27日 12:54/ 0 赞/ 643 阅读

相关页面局部刷新

场景：页面A使用第三方插件C，如果页面刷新，C会重新初始化并且无法记录之前的信息。现在希望页面的主要功能区B刷新，但是C的信息不要丢失。解决方案：B采用iframe方式...

红太狼/ 2020年06月23日 17:35/ 0 赞/ 1087 阅读