js显示隐藏div怎么写(如何通过js实现隐藏和显示DIV)

1.如何通过js实现隐藏和显示DIV

如下

style="display: none;"

document.getElementById("typediv1").style.display="none";//隐藏

document.getElementById("typediv1").style.display="";//显示

此JS代码中,没有用try——Catch捕获错误,代码如下:

<script language="javascript">

//创建一个showhidediv的方法,直接跟ID属性

function showhidediv(id){

var sbtitle=document.getElementById(id);

if(sbtitle){

if(sbtitle.style.display=='block'){

sbtitle.style.display='none';

}else{

sbtitle.style.display='block';

}

}

}

</script>

<div id="show" onm ouseMove='showhidediv("msg")';>;鼠标移动这里</div><;!--这里是点击div,ID要下面的ID-->

<div id="msg" style="display:none;">;出现显示的内容</div> <;!--这里是MsgDiv-->

onMouseMove='showhidediv("msg")'; 这里是鼠标动作,可以替换成Click或其他!

再次升级,做两个层之间的切换:

<script language="javascript">

//创建一个showhidediv的方法,直接跟ID属性

function showhidediv(id){

var age=document.getElementById("msg_2");

var name=document.getElementById("msg_1");

if (id == 'name') {

if (name.style.display=='none') {

age.style.display='none';

name.style.display='block';

}

} else {

if (age.style.display=='none') {

name.style.display='none';

age.style.display='block';

}

}

}

</script>

<div id="show" style="float:left;" onm ouseMove='showhidediv("name")';>Name:</div><div id="show" style="float:left;" onm ouseMove='showhidediv("age")';>Age:</div>

<div id="msg_1" style="display:none;float:left;">;林雨林</div>

<div id="msg_2" style="display:none;float:left;">18</div>

2.js显示和隐藏div

3个div分别给3个id,好选择

<div id="item1" class="licaiMain3 licaiMain4">

<h1>;显示1 <a href="#" target="_blank">;显示2</a><a href="#" target="_blank">;显示3</a></h1>

<p class="wenQ">Q:显示1</p>

<p class="daA">A:<a href="#" target="_blank">;显示11</a></p>

<p class="wenQ">Q:显示11</p>

<p class="daA">A:显示111</p>

</div>

<div id="item2" class="licaiMain3 licaiMain4 none">

<p class="wenQ">Q:显示2</p>

<p class="daA">A:<a href="#" target="_blank">;显示22</a></p>

<p class="wenQ">Q:显示22</p>

<p class="daA">A:显示222</p>

</div>

<div id="item3" class="licaiMain3 licaiMain4 none">

<p class="daA">A:<a href="#" target="_blank">;显示33</a></p>

<p class="wenQ">Q:显示33</p>

<p class="daA">A:显示333</p>

</div>

js如下

//鼠标移入

getDom("item1").onmouseover=function(){

getDom("item2").style.display="none";

getDom("item3").style.display="none";

}

//鼠标移出

getDom("item1").onmouseout=function(){

getDom("item2").style.display="block";

getDom("item3").style.display="block";

}

function getDom(id){

return document.getElementById(id);

}

3.原生JS实现点击一个div隐藏或者显示另外一个div怎么写

1. 第一个div添加onclick()方法。

2. 方法里面代码如下:

if(document.getElementById("B").style.display= ="none")

3. { //B是另一个div

document.getElementById("B").style.display= "block";

}

4. else{

document.getElementById("B").style.display= "none";

}

5. <meta ; charset=gb2312"/>

6. <title></title><script language="JavaScript" type="text/JavaScript">

7. function toggle(targetid){if (document.getElementById)

8. {target=document.getElementById(targetid);

9. if (target.style.display=="block"){target.style.display="none"; } else {target.style.display="block"; }

4.JS控制DIV的显示与隐藏

javascript控制页面控件隐藏显示的两种方法

javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位

方法一:

document.all["PanelSMS"].style.visibility="hidden";

document.all["PanelSMS"].style.visibility="visible";

方法二:

document.all["PanelSMS"].style.display="none";

document.all["PanelSMS"].style.display="inline";

方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static

方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic

js代码如下,新建一个txt文件,复制进去,保存并修改文件后缀为js(例open.js)即可。程序代码:

function showhidediv(id){

try{

var sbtitle=document.getElementById(id);

if(sbtitle){

if(sbtitle.style.display=='block'){

sbtitle.style.display='none';

}else{

sbtitle.style.display='block';

}

}

}catch(e){}

}

5.js隐藏显示DIV

隐藏和显示div的方式有两种:方式1:隐藏后仍占有页面空间,显示空白div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.style="visibility: none;"document.getElementById("typediv1").style.visibility="hidden";//隐藏document.getElementById("typediv1").style.visibility="visible";//显示方式2:隐藏后释放占用的页面空间通过设置display属性可以使div隐藏后释放占用的页面空间.style="display: none;"document.getElementById("typediv1").style.display="none";//隐藏document.getElementById("typediv1").style.display="";//显示。

6.JS CSS 显示隐藏DIV 层

你这个问题,不就是不想写两遍同样的css样式么,

把ID换成class不行,因为js没法通过class控制div的属性

你可以id和class一起写啊,id用于js调用,class用来写样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "1/DTD/xhtml1-transitional.dtd">

<html xmlns="">

<head>

<meta ; charset=gb2312" />

<title>;无标题文档</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function toggle(targetid){

if (document.getElementById){

target=document.getElementById(targetid);

if (target.style.display=="block"){

target.style.display="none";

} else {

target.style.display="block";

}

}

}

-->

</script>

<style type="text/css">

.div{ border:1px #06F solid;height:50px;width:100px;display:none;}

a { display:block}

</style>

</head>

<body>

<a href="#" onclick="toggle('div1')">;显示/隐藏</a>

<div id="div1" class="div"></div>

<a href="#" onclick="toggle('div2')">;显示/隐藏</a>

<div id="div2" class="div"></div>

</body>

</html>

这样不就可以了么

js显示隐藏div怎么写

转载请注明出处育才学习网 » js显示隐藏div怎么写(如何通过js实现隐藏和显示DIV)

知识

万圣节活动前言怎么写(万圣节的活动)

阅读(260)

本文主要为您介绍万圣节活动前言怎么写,内容包括万圣节活动方案,万圣节的活动,万圣节晚会策划书。万圣节的节日活动:万圣节南瓜灯万圣节“杰克灯”(南瓜灯)的样子十分可爱,做法也极为简单。将南瓜掏空,然后在外面刻上笑眯眯的眼睛和大嘴巴,

知识

台词课总结怎么写(台词总结怎么写)

阅读(283)

本文主要为您介绍台词课总结怎么写,内容包括台词总结怎么写作文600字,台词总结怎么写作文600字,一篇500字的初中台词总结急需。一句温暖的话,如天籁,嘹响在坎坷的成长路上;一句温暖的话,似清泉,浇灌在干涸的心灵上;一句温暖的话,像荫庇,遮挡在灼热

知识

就读于电大招工简历怎么写(招工简历怎么写)

阅读(313)

本文主要为您介绍就读于电大招工简历怎么写,内容包括招工简历怎么写,招聘个人简历怎样写,电大作业简述简历写作的要点。你所要的是找工作的应聘简历吧,给你参考如下:简历的设计原则真实。简历从内容上讲必须真实,比如选了什么课,就写什么课;如果

知识

起点写青春校园怎么样(起点写青春校园类小说,有前途吗)

阅读(260)

本文主要为您介绍起点写青春校园怎么样,内容包括起点写青春校园类小说,有前途吗,起点的学生读者多吗如果写青春校园的文章可以吗能红吗,在起点中文网哪个区域写青春校园小说最好。红袖添香确实不错。报酬高,但是竞争很激烈!你可以试着给以下

知识

家长变化的童谣怎么写(和家长一起写一篇童谣怎么写)

阅读(265)

本文主要为您介绍家长变化的童谣怎么写,内容包括关于家乡变化的童谣,有关家乡变化的童谣,一篇反映家乡变化的童谣急急急。2.学校像个家学校像个家,师生喜欢她,知识多多学,成才建家园,老师辛苦了,别忘了九月十日,祝老师节日快乐.3.老师,节日好上操

知识

设计图应该怎么写(设计方案怎么写包括什么主要内容)

阅读(306)

本文主要为您介绍设计图应该怎么写,内容包括如何写室内设计书面材料或画设计图,设计方案怎么写包括什么主要内容,设计作品的说明格式,应该怎么写。撰写设计方案有9项要点。1.题目。题目是策划书具体目的的体现,因此一定要写清楚,比如要举办什

知识

体育之星申请书怎么写(校园体育之星申请书怎么写)

阅读(344)

本文主要为您介绍体育之星申请书怎么写,内容包括校园体育之星申请书怎么写好吧,勤奋之星也可以一年被选一次,,校园体育之星申请书怎么写,校园体育之星申请书怎么写。我从小喜好运动,每有时间就和朋友们一起打排球,由于经常锻炼,我身体很好,也练

知识

产业项目简介怎么写(大学生创业项目简介怎么写)

阅读(625)

本文主要为您介绍产业项目简介怎么写,内容包括大学生创业项目简介怎么写,项目简介怎么写400字,大学生创业项目简介怎么写。去百度文库,查看完整内容>内容来自用户:轩辕月凝1大学生创业计划“反射式LED电子黑板”项目简介公司以技术开发为导向

知识

婚宴用酒条幅怎么写(摆酒请帖怎么写)

阅读(271)

本文主要为您介绍婚宴用酒条幅怎么写,内容包括婚礼条幅内容怎么写,婚礼现场条幅怎么写,婚宴和满月酒一起做,对联应该怎么写。结婚邀请函上书写的文字一般是: 送呈:XXX先生台启 公历 年 月 日 谨订于(星期日) 农历 年 月 日 为XX先生和XX小姐举

知识

液晶温度显示贴怎么用(温度贴的感温原理是什么)

阅读(384)

本文主要为您介绍液晶温度显示贴怎么用,内容包括洗鼻器液晶温度显示贴怎么用,洗鼻器液晶温度显示贴怎么用,液晶显示保护膜怎么贴啊。有种叫液晶体温计的贴片是利用液晶测温技术,通过颜色来显示温度,能安全准确的测量出温度,包括人体额温、水温

知识

酒店跑子屏怎么写(酒店显示屏标语怎么写)

阅读(381)

本文主要为您介绍酒店跑子屏怎么写,内容包括酒店显示屏标语怎么写,酒店显示屏该怎么写,出国留学请客,酒店滚动屏怎么写。创一流工作业绩,树立交通文明新风。"再提高、上水平" 确保工程质量和安全。精心设计是工程质量的灵魂,规范施工是工程质量

知识

nodejs里path参数怎么写(nodejs的环境变量怎么配置)

阅读(303)

本文主要为您介绍nodejs里path参数怎么写,内容包括nodejshttppostpath怎么写,nodejs的环境变量怎么配置,node.jspath的写入js内容格式怎么写。ubuntu安装jdk,ubuntu设置java环境变量,ubuntu安装jdk,ubuntu设置java环境变量下载jdk-6u12-

[/e:loop]