基於CSS+dIV的網頁層,點擊后隱藏或顯示


一個基於CSS+dIV的網頁層,用JavaScript結合Input按鈕進行控制,點擊后顯示或隱藏,網頁上常用到的特效之一,實用性較強,相信對大家的前端設計有幫助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>層隱藏,層點開</title>
</head>
<body>
<div id="box" style="border:1px solid #000; height:300px; width:300px;" ><a href='http://www.100sucai.com' target='_blank'>http://www.100sucai.com</a></div>
<input name="" type="button"  value="點擊隱藏"  id="btn" onclick="btn()"  style="position:absolute; left:320px; top:10px;">
</body>
<script type="text/javascript">
var btn1=document.getElementById('btn');
var box1=document.getElementById('box');
function btn(){ if(btn1.value=="點擊隱藏"){box1.style.display='none';btn1.value="點擊顯示";
}else{box1.style.display='';btn1.value="點擊隱藏";
}
}
</script>
</html>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM