Home >Web Front-end >HTML Tutorial >基于CSS+dIV的网页层，点击后隐藏或显示_html/css_WEB-ITnose
基于CSS+dIV的网页层，点击后隐藏或显示_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:211378browse
一个基于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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css脱离文档流_html/css_WEB-ITnoseNext article：Html做三个平台原生APP啦_html/css_WEB-ITnose