仿雅虎另类CSS滑动门切换

2024-09-05 12:20:11

字体：大中小

来源：转载

供稿：网友

仿照雅虎特色服务的一个Tab滑动切换效果，核心是一个CSS滑动门，经过了改进，有点特别，看下效果吧，估计很多朋友会喜欢的。

<!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><title>仿雅虎另类CSS滑动门切换-源码爱好者vevb.com</title><style type="text/css"></style><script type="text/javascript">window.onload = function(){	alltabs = document.getElementById('tabs').getElementsByTagName('dl')	for(i = 0; i < alltabs.length; i++){		alltabs[i].className = "close"		alltabs[i].onmouseover = function(){			for(j = 0; j < alltabs.length; j++){				alltabs[j].className = "close"			}			this.className = "open"		}	}}</script></head><body><div id="tabs"><h2>·欢迎来到源码爱好者</h2>  <div>    <dl id="tab1">      <dt>今日更新</dt>      <dd>1、今日更新的内容</dd>    </dl>    <dl id="tab2">      <dt>今日排行</dt>      <dd>2、今日排行的内容</dd>    </dl>    <dl id="tab3">      <dt>今日推荐</dt>      <dd>3、今日推荐的内容</dd>    </dl>  </div>  <div>    <dl id="tab4">      <dt>最近下载</dt>      <dd>4、最近下载的东西</dd>    </dl>    <dl id="tab5">      <dt>源码总排行</dt>      <dd>5、源码总排行的内容</dd>    </dl>    <dl id="tab6">      <dt>网页特效</dt>      <dd>6、精品网页特效的内容</dd>    </dl>  </div></div></body></html>

上一篇：带英文提示的CSS网站导航栏

下一篇：圆弧背景的导航菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注