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 ...
随机推荐
- PLSQL导入Excel数据方法
1.把Excel文件另存为(文本文件(制表符分隔)(*.txt)) 2.把新生成的student.txt文件导入到plsql 打开plsql连接到要导入的oracle数据库再打开Tools - ...
- java 文件读取大全
1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile { /** * 以字节为单位读取文件,常用 ...
- Laravel教程 六:表单 Forms
Laravel教程 六:表单 Forms 此文章为原创文章,未经同意,禁止转载. Form laravel 5.2 之后请使用 laravelcollective/html 替换 illuminate ...
- 让Windows 7内置Administrator 用户也能使用指纹登录
前言 这周末重装了个系统,之前用windows 8 现在8.1预览版出来了,琢磨着是不是给升级玩玩.装上后感觉变化不大,后来一折腾,就换回windows 7 了(64位旗舰版).将安装时创建的用户删除 ...
- Apache配置默认首页
操作系统:CentOS 6.5 Apache默认主页为index.html,如果要修改为index.php或其它,需要修改httpd.conf文件 用vim或其它编辑器打开httpd.conf 在上图 ...
- Color Space
色域(Color Space),又被称为色彩空间,它代表了一个色彩影像所能表现的色彩具体情况.我们经常用到的色彩空间主要有RGB.CMYK.Lab等,而RGB色彩 空间又有AdobeRGB.Apple ...
- dedecms最新版本修改任意管理员漏洞
此漏洞无视gpc转义,过80sec注入防御. 补充下,不用担心后台找不到.这只是一个demo,都能修改任意数据库了,还怕拿不到SHELL? 起因是全局变量$GLOBALS可以被任意修改,随便看了下,漏 ...
- angular2怎么使用第三方的库(jquery等)
网上找了很多教材都搜索不到该部分类型,自己测试了下写了该教程. 场景说明:项目需要使用bootstrap,众所周知bootstrap没有时间日期控件的,需要使用第三方控件,我对如何在angular2中 ...
- logback 项目应用
1.gradle引用: compile group: 'commons-logging', name: 'commons-logging', version: '1.1.3' compile grou ...
- 用JSON-server模拟REST API(三) 进阶使用
用JSON-server模拟REST API(三) 进阶使用 前面演示了如何安装并运行 json server , 和使用第三方库真实化模拟数据 , 下面将展开更多的配置项和数据操作. 目录: 配置项 ...