js显示隐藏div怎么写 如何通过js实现隐藏和显示DIV
- 综合知识
- 关注:1.06W次
如下
style=";"
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">;出现显示的内容</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" onm ouseMove='showhidediv("name")';>Name:</div><div id="show" onm ouseMove='showhidediv("age")';>Age:</div>
<div id="msg_1">;林雨林</div>
<div id="msg_2">18</div>
2.js显示和隐藏div3个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=";"document.getElementById("typediv1").style.visibility="hidden";//隐藏document.getElementById("typediv1").style.visibility="visible";//显示方式2:隐藏后释放占用的页面空间通过设置display属性可以使div隐藏后释放占用的页面空间.style=";"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>
这样不就可以了么
- 文章版权属于文章作者所有,转载请注明 https://dongkepu.com/zonghezhishi/yjlxp9.html