關閉→
當前位置:知科普>綜合知識>如何通過js實現隱藏和顯示DIV - js顯示隱藏div怎麼寫

如何通過js實現隱藏和顯示DIV - js顯示隱藏div怎麼寫

知科普 人氣:7.68K
1.如何通過js實現隱藏和顯示DIV

如下

js顯示隱藏div怎麼寫 如何通過js實現隱藏和顯示DIV

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顯示和隱藏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=";"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>

這樣不就可以了麼

TAG標籤:#div #div #js #