實現點選按鈕切換顯示和隱藏效果
阿新 • • 發佈:2019-01-22
點選同一個按鈕可以實現一個元素的顯示和隱藏的切換,下面就通過程式碼例項介紹一下如何實現此效果,程式碼如下:
?
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
< html >
< head >
< meta
charset = "gb2312" >
< title >隱藏和顯示</ title >
< style
type = "text/css" >
#thediv
{
width:200px;
height:100px;
line-height:100px;
text-align:center; background-color:green;
}
</ style >
< script
type = "text/javascript" >
function Show_Hidden(obj)
{
if(obj.style.display=="block")
{
obj.style.display='none';
}
else
{
obj.style.display='block';
}
}
window.onload=function()
{
var olink=document.getElementById("link");
var odiv=document.getElementById("thediv"); olink.onclick=function()
{
Show_Hidden(odiv);
return false;
}
}
</ script >
</ head >
< body >
< a
href = "#"
id = "link" >顯示\隱藏切換</ a >
< div
id = "thediv"
style = "display:block" >指令碼之家歡迎您</ div >
</ body >
</ html >
|
以上程式碼實現了我們的要求,點選頂部連結可以實現div顯示和隱藏的切換,下面介紹一下它的實現過程。
實現原理:
為連結註冊onclick事件處理函式,此處理函式可以判斷div的style.display屬性值,如果為block則將其設定為none,也就是將div設定為隱藏狀態,否則設定為block,也就是將div設定為顯示狀態,原理大致如此。需要特別注意的是,在div中,之所以使用style="display:block"的目的是讓obj.style.display語句能夠獲取屬性值,否則第一次點選無法將div設定為隱藏,大家可以去掉style="display:block"做一下測試,return false語句是為了防止連結的跳轉效果