生活全書館如何通過js實現隱藏和顯示DIV js顯示隱藏div怎麼寫
- 綜合知識
- 關注：8.35K次
如下
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://shqsg.com/zonghezhishi/3ye3gz.html
