转载自: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>

随机推荐

  1. 约瑟夫问题(java实现)

    方法一.自定义的链表实现 package com.code.yuesefu; public class YueSeFuList { public static void main(String[] a ...

  2. [原创]Centos7 从零配置Nginx+PHP+MySql

    序言 这次玩次狠得.除了编译器使用yum安装,其他全部手动编译.哼~ 看似就Nginx.PHP.MySql三个东东,但是它们太尼玛依赖别人了. 没办法,想用它们就得老老实实给它们提供想要的东西. 首先 ...

  3. DNS记录类型介绍(A记录、MX记录、NS记录等)

    DNS A记录 NS记录 MX记录 CNAME记录 TXT记录 TTL值 PTR值 建站名词解释:DNS A记录 NS记录 MX记录 CNAME记录 TXT记录 TTL值 PTR值 泛域名 泛解析 域 ...

  4. jQuery 浮动标签插件,帮助你提升表单用户体验

    浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...

  5. 没学过CSS等前端的我,也想美化一下自己的博客

    随便说几句: 自己一直学的都是 C++和 Java 以及 Python语言,根本不懂高大上的 CSS 和 著名的 HTML5.感觉那些能自己设计那么漂亮的博客的朋友都好厉害.可以自己加上博客公告栏的小 ...

  6. ASP.NET 5探险(2):上传文件

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:在ASP.NET 5(MVC 6)中处理上传文件的方式和之前有所不同. 在MVC 5之 ...

  7. Makefile 开发环境全能管家

    变量的应用: CC=gcc RM=rm EXE=main.exe OBJS=目标 伪目标的应用: .PHONY:clean 自动变量的应用: $@:表示一个规则的目标 $^:表示的是规则中的所有的先决 ...

  8. 配置caffe的python环境时make pycaffe提示fatal error: numpy/arrayobject.h No such file or directory解决方法

    重装numpy: sudo pip uninstall numpy sudo pip install numpy 是没有用的... 解决的办法就是: sudo apt-get install pyth ...

  9. 利用DBMS_ROWID.ROWID_CREATE来找出事务等待的行数据

    在v$session视图中有四个字段,如下: Wait information in v$session view ROW_WAIT_OBJ# NUMBER Object ID for the tab ...

  10. 搜集好的java技术帖子,持续更新,java程序员的要求

    1.Java NIO 系列教程 2.Java实现 二叉搜索树算法(BST) 3. Java 并发工具包 java.util.concurrent 用户指南 4.架构师之路系列:http://blog. ...