JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html
JS控制DIV隐藏显示
一,需求描述:
现在有3个DIV块,3个超链接,需要点击一个链接,显示相应的模块,并隐藏其余2个模块
二,代码如下
示例一
- <html>
- <head>
- <script type="text/javascript">
- function changeBody(index){
- switch(index){
- case 1:{
- document.getElementById('iDBody1').style.display = "";
- document.getElementById('iDBody2').style.display = "none";
- document.getElementById('iDBody3').style.display = "none";
- break;
- }
- case 2:{
- document.getElementById('iDBody1').style.display = "none";
- document.getElementById('iDBody2').style.display = "";
- document.getElementById('iDBody3').style.display = "none";
- break;
- }
- case 3:{
- document.getElementById('iDBody1').style.display = "none";
- document.getElementById('iDBody2').style.display = "none";
- document.getElementById('iDBody3').style.display = "";
- break;
- }
- }
- }
- </script>
- </head>
- <body>
- <a href="javascript:changeBody(1)">模块A</a>
- <a href="javascript:changeBody(2)">模块B</a>
- <a href="javascript:changeBody(3)">模块C</a>
- <div style="display: none" id="iDBody1">
- 模块(一)的相关内容
- </div>
- <div style="display: none" id="iDBody2">
- 模块(二)的相关内容
- </div>
- <div style="display: none" id="iDBody3">
- 模块(三)的相关内容
- </div>
- </body>
- </html>
示例二
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>DIV-3</title>
- <style type="text/css">
- .hiddiv {display:none}
- </style>
- <SCRIPT language=JavaScript>
- <!--
- function a(x){
- for( ; i<divLen; i++ ){
- if(allDiv[i].className=="hiddiv")
- allDiv[i].style.display = "none"
- if(allDiv[i].id=="div"+x)
- allDiv[i].style.display = "block"
- }
- }
- window.onload = function(){
- allDiv = document.getElementsByTagName("div");
- divLen = allDiv.length
- }
- -->
- </SCRIPT>
- </head>
- <body>
- <div id="div1" class="hiddiv" style="display:block">此处显示 id "div1" 的内容</div><br>
- <div id="div2" class="hiddiv">此处显示 id "div2" 的内容</div><br>
- <div id="div3" class="hiddiv">此处显示 id "div3" 的内容</div><br>
- <div id="div4" class="hiddiv">此处显示 id "div4" 的内容</div><br>
- <select onChange="a(value)">
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- </select>
- </body>
- </html>
JS控制DIV隐藏显示的更多相关文章
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- js控制tr 隐藏 显示
tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...
- js控制div是否显示
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- 原生JS的移入溢出控制div的显示与隐藏
原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性
- 简简单单,jquery中,使用checkbox控制div的显示与隐藏
今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...
- 【功能代码】---5 JS通过事件隐藏显示元素
JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none <div id=" ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
随机推荐
- 使用Jayrock开源组件创建参数可为空的接口
经过上一篇文章对Jayrock开源组件的分析,我发现了一个问题,就是在写接口的时候,可以设置某个参数为空,可以不需要进行参数的传递,具体写法如下: 图上的test参数就是可空类型,只需标识为int?类 ...
- 在纯HTML的静态网页中添加一段统计网页访问量的JAVA Script代码?
如何在网站上进行流量统计呢,可以找第三方服务网站去注册,但也可以在网站上直接添加代码,只需将以下代码copy到你的网页中,复制到</body>之前就可以啦!是不是很简单啊! <scr ...
- POJ1258Agri-Net(prime基础)
Agri-Net Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 46811 Accepted: 19335 Descri ...
- HD1205吃糖果(鸽巢、抽屉原理)
吃糖果 Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Submiss ...
- aapt aidl
AIDL:Android Interface Definition Language,即Android接口定义语言 aapt即Android Asset Packaging Tool,在SDK的bui ...
- 创建,增加,删除mysql表分区
1.测试添加分区和删除分区 ###添加删除range分区 (1)创建一个分区: CREATE TABLE titles ( emp_no INT NOT NULL, titl ...
- js中按钮控制显示隐藏以及下拉功能
<script> function show() { var a2=document.getElementById("div2"); if(a2.style.displ ...
- 在64位windows 7上安装汇编调试工具debug.exe的方法
最近我在研究汇编,书中介绍的调试工具还是基于WinXP 32bit时代中自带debug.exe进行调试,但是64bit的Windows XP.Vista.Win7.Win8都已经不自带这个工具了,网上 ...
- DedeCMS V5.7 Dialog目录下配置文件XSS漏洞
漏洞地址及证明:/include/dialog/config.php?adminDirHand="/></script><script>alert(1);< ...
- 如何做一名好的web安全工程师?
在网络安全行业里面,web安全方向的人相对来说算是占大头,因为web安全初学阶段不像系统底层安全那么枯燥,而且成功hack目标网站的成就感相对也是比较强的. web安全工程师这个职位在甲方和乙方公司都 ...