Maison > interface Web > tutoriel HTML > 基于CSS+dIV的网页层,点击后隐藏或显示_html/css_WEB-ITnose

基于CSS+dIV的网页层,点击后隐藏或显示_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:38:21
original
1378 Les gens l'ont consulté

一个基于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>
Copier après la connexion

  

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal