博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页里实现页面折叠的两种方法
阅读量:4051 次
发布时间:2019-05-25

本文共 1788 字,大约阅读时间需要 5 分钟。

方法一:

需要两张小图,一个表示上,一个表示下,本例中为toggle_gray_up.gif和toggle_gray_down.gif。源自。。html和javascript代码如下:
<html>
<head>
<script language="JavaScript">

function ToggleVisible(targetID, imageID, linkImage, linkImageCollapsed)

{
 if (document.getElementById){
    target = document.getElementById(targetID);
    if (target.style.display == "none") {
     target.style.display = "";
    } else {
     target.style.display = "none";
    }
    
    if (linkImageCollapsed != "") {
     image = document.getElementById(imageID);
     if (target.style.display == "none") {
      image.src = linkImageCollapsed;
     } else {
      image.src = linkImage;
     }
    }
   }
}

</script>

</head>

<body>

<table width="300" border=1 id="test" cellpadding="0" cellspacing="0" >

<tr>
 <td height=20 align=right>
  <a onClick="ToggleVisible('Contents','LinkImage','toggle_gray_up.gif','toggle_gray_down.gif'); return false;" href="#">
   <div  width=100% height=20><img  id="LinkImage" src="toggle_gray_down.gif" src="toggle_gray_down.gif" alt="" border="0" /></div>
  </a>
 </td>
</tr>

<tr id="Contents">

<td>
test 123 123 12 test<br>
test 123 123 12 test<br>
test 123 123 12 test<br>
</td>
</tr>
</table>
</body>
</html>

方法二:

什么都不需要。直接点表头就可以实现折叠。源自。。html和javascript代码如下:
<html>
<head>
<script language="JavaScript">
function $(s){return document.getElementById(s);}
function swap(s,a,b,c){$(s)[a]=$(s)[a]==b?c:b;}
function hide(s){$(s).style.display=$(s).style.display=="none"?"":"none";}
</script>
</head>
<body>

<table width="100%" border=1 id="test" cellpadding="0" cellspacing="0" >

<tr onClick="javascript:hide('content');swap('title','className','up','down');">
                              <td id="title" class="up">分类</td>
</tr>
 
<tr id="content" ><td>
test 123 123 12 test<br>
test 123 123 12 test<br>
test 123 123 12 test<br>
</tr></td>
</table>
</body>
</html>

Trackback: http://tb.donews.net/TrackBack.aspx?PostId=768666

转载地址:http://sqici.baihongyu.com/

你可能感兴趣的文章
函数式柯里化的理解?
查看>>
时间戳转化为年月日时分秒
查看>>
配置ssh公钥
查看>>
git clone拉代码的时候出现permission denied 没有权限的问题解决
查看>>
前端-vue-文件上传(图片、word,ppt,pdf,excel,txt等文件流)
查看>>
word,PDF,excel、ppt等文件上传,视频上传查看等
查看>>
java 不用递归写tree
查看>>
springboot2 集成Hibernate JPA 用 声明式事物
查看>>
fhs-framework jetcache 缓存维护之自动清除缓存
查看>>
SpringBoot 动态编译 JAVA class 解决 jar in jar 的依赖问题
查看>>
fhs_framework springcloud使用统一的控制器来接收rpc调用请求教程,无需每个rpc接口都写控制器
查看>>
fhs-framework springboot mybatis 解决表关联查询问题的关键方案-翻译服务
查看>>
Springboot + easyui + mybatis 高级搜索功能实现
查看>>
k8s 踩坑笔记
查看>>
SpringCloud Seata Nacos 整合教程和坑
查看>>
nacos 本地覆盖远程 本地优先
查看>>
java 查询内存泄漏
查看>>
httpclient4.5 绕过ssl证书校验 -看别人文章解决不了的,看下我这个
查看>>
基于webpack的vue语法糖实现思路
查看>>
jenkins流水线脚本 从sonar代码扫描,到maven构建,到docker打包,到k8s发布
查看>>