• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

一个小程序——页面的隐藏与显示

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

 
   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5:  <title>js分栏模式</title>
   6:  </head>
   7:  <body>
   8:  <form action="" method="get" name="form1" >
   9:  <table width="300" border="1"  id="table1"  name="table" height="400px" >  
  10:  <th id="lanmu" width="70">
  11:  <p><a href="#">栏目一</a></p>
  12:  <p><a href="#">栏目二</a></p>
  13:  <p><a href="#">栏目三</a></p>
  14:  <p><a href="#">栏目四</a></p>
  15:  </th>
  16:  <th id="xy" width="5"><img src="haha.jpg" width="11" height="37" onclick="javascript:hide()" /></th>
  17:  <th>这里是内容区域</th>
  18:  </table>
  19:  </form>
  20:  </body>
  21:  </html>
  22:  <script language="javascript" type="text/javascript">
  23:  //隐藏栏目
  24:  function hide()
  25:  {
  26:      //将id为lanmu的样式的display属性设置为none,即隐藏起来
  27:      document.getElementById("lanmu").style.display="none";
  28:      //将id为lanmu的html语句换为下面的这句,点击出发的事件为显示
  29:      document.getElementById("xy").innerHTML="<img src=\'haha2.jpg\' onclick=\'javascript:xs()\' />"
  30:  }
  31:  //显示栏目
  32:  function xs()
  33:  {
  34:      //讲id为lanmu的样式的display属性设为空,即显示出来
  35:      document.getElementById("lanmu").style.display="";
  36:      //将id为lanmu的样式的html语句更换回去,点击触发的事件为隐藏
  37:      document.getElementById("xy").innerHTML="<img src=\'haha.jpg\' onclick=\'javascript:hide()\' />;"
  38:  }
  39:  </script>

原始界面:

隐藏后界面:

 

还原后界面:


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序中显示与隐藏(hidden)发布时间:2022-07-18
下一篇:
【微信小程序】 wx:if 与 hidden(隐藏元素)区别发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap