用选项卡控制DIV层切换改变背景颜色

2024-09-05 12:21:54

字体：大中小

来源：转载

供稿：网友

用选项卡控制DIV层的切换从页适时改变网页指定区域的背景颜色，并利用CSS的滤镜将背景颜色填充为渐变色，从这个实例我们可以学到不少东西哦。

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>层切换</title><style> #red{  display:block;  float:left;  position:absolute;  width:336px;  height:336px;  background-color:#ff0000;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=deeppink);}#green{  display:none;  float:left;  position:absolute;  width:336px;  height:336px;  background-color:#00ff00;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green);}#blue{  display:none;  float:left;  position:absolute;  width:336px;  height:336px;  background-color:#0000ff;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue);}#switch{  position:absolute;  top:336px;  width:336px;  height:30px;  background-color:#003399;}#switch a.tabs{  float:left;  color:#ffffff;  height:28px;  width:100px;  margin:0;  padding:8px 0 0 14px;  font-size:12px;  cursor:pointer;  text-decoration:none;text-align:center;  }#switch a.tabs:hover{  color:#ffff00;  background-color:#666666;  text-decoration:none;}body{filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=orange);}</style><script language="javascript"> function switchbox(i){ selectbox(i);}function selectbox(i){ switch(i) { case 1: document.getElementById("red").style.display="block"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="none"; break; case 2: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="block"; document.getElementById("blue").style.display="none"; break; case 3: document.getElementById("red").style.display="none"; document.getElementById("green").style.display="none"; document.getElementById("blue").style.display="block"; break; }}</script></head><body><div style="position:absolute;top:19px;left:320px;"><div id="content"><div id="red"></div><div id="green"></div><div id="blue"></div></div><div id="switch">红色绿色蓝色</div></div></body></html>

上一篇：js滑动图片菜单

下一篇：点击鼠标在网页上生成气泡

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注