转载自：http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html

JS控制DIV隐藏显示

一，需求描述：

现在有3个DIV块，3个超链接，需要点击一个链接，显示相应的模块，并隐藏其余2个模块

二，代码如下

示例一

Html代码
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function changeBody(index){
  5. switch(index){
  6. case 1:{
  7. document.getElementById('iDBody1').style.display = "";
  8. document.getElementById('iDBody2').style.display = "none";
  9. document.getElementById('iDBody3').style.display = "none";
  10. break;
  11. }
  12. case 2:{
  13. document.getElementById('iDBody1').style.display = "none";
  14. document.getElementById('iDBody2').style.display = "";
  15. document.getElementById('iDBody3').style.display = "none";
  16. break;
  17. }
  18. case 3:{
  19. document.getElementById('iDBody1').style.display = "none";
  20. document.getElementById('iDBody2').style.display = "none";
  21. document.getElementById('iDBody3').style.display = "";
  22. break;
  23. }
  24. }
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <a href="javascript:changeBody(1)">模块A</a>
  30. <a href="javascript:changeBody(2)">模块B</a>
  31. <a href="javascript:changeBody(3)">模块C</a>
  32. <div style="display: none" id="iDBody1">
  33. 模块(一)的相关内容
  34. </div>
  35. <div style="display: none" id="iDBody2">
  36. 模块(二)的相关内容
  37. </div>
  38. <div style="display: none" id="iDBody3">
  39. 模块(三)的相关内容
  40. </div>
  41. </body>
  42. </html>

示例二

Html代码
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>DIV-3</title>
  5. <style type="text/css">
  6. .hiddiv {display:none}
  7. </style>
  8. <SCRIPT language=JavaScript>
  9. <!--
  10. function a(x){
  11. for( ; i<divLen; i++ ){
  12. if(allDiv[i].className=="hiddiv")
  13. allDiv[i].style.display = "none"
  14. if(allDiv[i].id=="div"+x)
  15. allDiv[i].style.display = "block"
  16. }
  17. }
  18. window.onload = function(){
  19. allDiv = document.getElementsByTagName("div");
  20. divLen = allDiv.length
  21. }
  22. -->
  23. </SCRIPT>
  24. </head>
  25. <body>
  26. <div id="div1" class="hiddiv" style="display:block">此处显示 id "div1" 的内容</div><br>
  27. <div id="div2" class="hiddiv">此处显示 id "div2" 的内容</div><br>
  28. <div id="div3" class="hiddiv">此处显示 id "div3" 的内容</div><br>
  29. <div id="div4" class="hiddiv">此处显示 id "div4" 的内容</div><br>
  30. <select onChange="a(value)">
  31. <option value="1">1</option>
  32. <option value="2">2</option>
  33. <option value="3">3</option>
  34. <option value="4">4</option>
  35. </select>
  36. </body>
  37. </html>

JS控制DIV隐藏显示的更多相关文章

  1. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  3. js控制tr 隐藏 显示

    tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...

  4. js控制div是否显示

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  6. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  7. 简简单单，jquery中，使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

  8. 【功能代码】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  9. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

随机推荐

  1. 【BZOJ-1452】Count 树状数组 套 树状数组

    1452: [JSOI2009]Count Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1769  Solved: 1059[Submit][Stat ...

  2. OpenJudge 7627 鸡蛋的硬度

    描述 最近XX公司举办了一个奇怪的比赛:鸡蛋硬度之王争霸赛.参赛者是来自世 界各地的母鸡,比赛的内容是看谁下的蛋最硬,更奇怪的是XX公司并不使用什么精密仪器来测量蛋的硬度,他们采用了一种最老土的办法- ...

  3. Linux强制访问控制机制模块分析之mls_type.h

    2.4.2 mls_type.h 2.4.2.1文件描述 对于mls_type.h文件,其完整文件名为security/selinux/ss/mls_types.h,该文件定义了MLS策略使用的类型. ...

  4. linux桌面应用开发之折腾

    1 起因 需要开发一个wifi定位的应用,最先在android下搞,后来因为多网卡的原因要换平台,经历了windows,最终选择用kaili linux.debian系的linux,开发桌面应用怎么办 ...

  5. OracleBulkCopy批量插入数据

    1.OracleBulk程序集引用using ODAC = Oracle.DataAccess.Client 2.有时候不做字段映射,会使导入的数据出错 上代码 /// <summary> ...

  6. php多态设计

    原文:http://www.cnblogs.com/tecs27/archive/2012/03/13/2394028.html 多态性是指相同的操作或函数.过程可作用于多种类型的对象上并获得不同的结 ...

  7. c# 解析JSON的几种办法（转载）

    对比 .NET下几种常见的解析JSON方法 主要类 命名空间 限制 内建LINQ支持 DataContractJsonSerializer System.Runtime.Serialization.J ...

  8. this prototype 闭包 总结

    this对象 整理下思路: 一般用到this中的情景: 1.构造方法中 function A(){ this.name="yinshen"; } var a=new A(); co ...

  9. 一张图解释Hadoop IPC

    基于hadoop2.6.2.... 一张图Server启动,Client访问..... RPC是IPC的一种,IPC还有另外一种LPC,相关请看参考中的3 使用hadoop ipc步骤: 1.定义RP ...

  10. 证明ln2=0 和 2=1

    我们知道下式成立: \begin{equation}\ln(1+x)=x-\frac{x^2}{2}+\frac{x^3}{3}-\frac{x^4}{4}+\ldots\label{eq1}\end ...