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 ...
随机推荐
- mysql中的if判断
问题是这样的,有一张表(tb_class)专门保存班级的ID和班级的名字 另一张表是学生信息表(tb_stu),表中有一个字段叫classID,没有外键关联,现在要把 这张表刷新到另一个表tb_par ...
- 洛谷P1136 迎接仪式
题目描述 LHX教主要来X市指导OI学习工作了.为了迎接教主,在一条道路旁,一群Orz教主er穿着文化衫站在道路两旁迎接教主,每件文化衫上都印着大字.一旁的Orzer依次摆出“欢迎欢迎欢迎欢迎……”的 ...
- java中的不为空判断
String不为空判断 if(null != str && !"".equals(str)) List不为空判断 if(list!=null && ...
- loadrunner获取Http信息头中指定值作为参数
); //web_save_header(RESPONSE,"response header"); //web_save_header(REQUEST,"request ...
- 使用 Python 抓取欧洲足球联赛数据
Web Scraping在大数据时代,一切都要用数据来说话,大数据处理的过程一般需要经过以下的几个步骤 数据的采集和获取 数据的清洗,抽取,变形和装载 数据的分析,探索和预测 ...
- fiddler 挂载 JS文件
有时候,网站 JS 有问题,或者我们想调试JS,就修改了JS,,然后希望它在本地能与网站一起运行,就需要用到 挂载JS了
- Python socket编程之五:更新分时图
f1.py # -*- coding: utf-8 -*- import socket import struct import sqlalchemy import pandas ########## ...
- @suppressWarnings解释
J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 一点背景:J2SE 5.0 为 Java 语言增加 ...
- There are no interfaces on which a capture can be done.
There are no interfaces on which a capture can be done. 今天启动了Wireshark 但是提示→There are no interfaces ...
- Flume-NG之KafkaChannel
apache下一个版本(1.6)将会带来一个新的组件KafKaChannel,顾名思义就是使用kafka做channel,当然在CDH5.3版本已经存在这个channel. 大伙知道,常用的chann ...