<style> #dv1{ width:60px; height:36px; margin:0 auto; background-color:orange; display:none; } #dv2{ width:120px; height:62px; margin:0 auto; background-color:orange; display:none; } </style> <body> <input type="button" value="隐藏" id="btn" /> <input type="button" value="显示" id="btn1" /> <div id="dv1"></div> <div id="dv2">生日快乐</div> <script> function my(id){ return document.getElementById(id); } my("btn").onclick=function(){ my("dv1").style.display="none"; my("dv2").style.display="none"; } my("btn1").onclick=function(){ my("dv1").style.display="block"; my("dv2").style.display="block"; } </script> </body>
以上是生日礼物网页Javascript版。
<style> #dv1{ width:60px; height:36px; margin:0 auto; background-color:orange; } #dv2{ width:120px; height:62px; margin:0 auto; background-color:orange; } #main { width:120px; height:98px; margin:0 auto; overflow:hidden; } #box { width:120px; height:98px; margin:0 auto; } </style> <body> <div id="main"> <div id="box"></div> <div id="dv1"></div> <div id="dv2">生日快乐</div> </div> <p> <a href="#box">隐藏</a> <a href="#dv1">显示</a> </p> </body>
以上是生日礼物网页锚点版。
效果都是暗隐藏隐藏生日蛋糕,按显示显示生日蛋糕。