仿雅虎另類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   class="iwvjtn8m0"   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網站導航欄

下一篇：圓弧背景的導航菜單