JS控制DIV的显示与隐藏篇1
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）即可。程序代码：
functionshowhidediv(id){
try{
varsbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}catch(e){}
}
js隐藏显示DIV篇2
隐藏和显示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=""；//显示。
如何通过js实现隐藏和显示DIV篇3
如下
style="display:none;"
document.getElementById("typediv1").style.display="none"；//隐藏
document.getElementById("typediv1").style.display=""；//显示
此JS代码中，没有用try——Catch捕获错误，代码如下：
<scriptlanguage="javascript">
//创建一个showhidediv的方法，直接跟ID属性
functionshowhidediv(id){
varsbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}
</script>
<divid="show"onmouseMove='showhidediv("msg")';>；鼠标移动这里</div><；！--这里是点击div,ID要下面的ID-->
<divid="msg"style="display:none;">；出现显示的内容</div><；！--这里是MsgDiv-->
onMouseMove='showhidediv("msg")'；这里是鼠标动作，可以替换成Click或其他！
再次升级，做两个层之间的切换：
<scriptlanguage="javascript">
//创建一个showhidediv的方法，直接跟ID属性
functionshowhidediv(id){
varage=document.getElementById("msg_2");
varname=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>
<divid="show"style="float:left;"onmouseMove='showhidediv("name")';>Name:</div><divid="show"style="float:left;"onmouseMove='showhidediv("age")';>Age:</div>
<divid="msg_1"style="display:none;float:left;">；林雨林</div>
<divid="msg_2"style="display:none;float:left;">18</div>
JSCSS显示隐藏DIV层篇4
你这个问题，不就是不想写两遍同样的css样式么，
把ID换成class不行，因为js没法通过class控制div的属性
你可以id和class一起写啊，id用于js调用，class用来写样式
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="">
<head>
<meta;charset=gb2312"/>
<title>；无标题文档</title>
<scriptlanguage="JavaScript"type="text/JavaScript">
<!--
functiontoggle(targetid){
if(document.getElementById){
target=document.getElementById(targetid);
if(target.style.display=="block"){
target.style.display="none";
}else{
target.style.display="block";
}
}
}
-->
</script>
<styletype="text/css">
.div{border:1px#06Fsolid;height:50px;width:100px;display:none;}
a{display:block}
</style>
</head>
<body>
<ahref="#"onclick="toggle('div1')">；显示/隐藏</a>
<divid="div1"class="div"></div>
<ahref="#"onclick="toggle('div2')">；显示/隐藏</a>
<divid="div2"class="div"></div>
</body>
</html>
这样不就可以了么
原生JS实现点击一个div隐藏或者显示另外一个div怎么写篇5
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><scriptlanguage="JavaScript"type="text/JavaScript">
7.functiontoggle(targetid){if(document.getElementById)
8.{target=document.getElementById(targetid);
9.if(target.style.display=="block"){target.style.display="none";}else{target.style.display="block";}
js显示和隐藏div篇6
3个div分别给3个id，好选择
<divid="item1"class="licaiMain3licaiMain4">
<h1>；显示1<ahref="#"target="_blank">；显示2</a><ahref="#"target="_blank">；显示3</a></h1>
<pclass="wenQ">Q：显示1</p>
<pclass="daA">A:<ahref="#"target="_blank">；显示11</a></p>
<pclass="wenQ">Q：显示11</p>
<pclass="daA">A：显示111</p>
</div>
<divid="item2"class="licaiMain3licaiMain4none">
<pclass="wenQ">Q：显示2</p>
<pclass="daA">A:<ahref="#"target="_blank">；显示22</a></p>
<pclass="wenQ">Q：显示22</p>
<pclass="daA">A：显示222</p>
</div>
<divid="item3"class="licaiMain3licaiMain4none">
<pclass="daA">A:<ahref="#"target="_blank">；显示33</a></p>
<pclass="wenQ">Q：显示33</p>
<pclass="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";
}
functiongetDom(id){
returndocument.getElementById(id);
}