> 웹 프론트엔드 > HTML 튜토리얼 > 基于CSS+dIV的网页层,点击后隐藏或显示_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:38:21
원래의
1378명이 탐색했습니다.

一个基于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>
로그인 후 복사

  

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿