注重體驗、語義、兼容的TAB滑動門修正版_菜單導(dǎo)航特效

根據(jù)以前的一個tab，加上新的結(jié)構(gòu)基礎(chǔ)做出來的。兼容IE6-IE8、FireFox、Chrome、Opera和Safari。如果你不介意display:none出現(xiàn)在CSS里的話，可以小改一下，那結(jié)構(gòu)、樣式、行為就算是完全分離開了。至于具體的代碼我這里就不分析了，大家看看就知，很容易看懂。

<!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" mrc="text/html; charset=utf-8" />
<title>注重語義、結(jié)構(gòu)、用戶體驗的Tab選項卡</title>
<style>
* {margin:0; padding:0;}
body {background:#FFF; color:#333;}
a {color:#333; text-decoration:none;}
a:hover {text-decoration:underline;}
ul, li {list-style:none;}
.wrap {width:700px; margin:0 auto; line-height:25px; font-size:12px;}
h1 {text-align:center; margin-top:50px;}
#hotnews {position:relative; width:350px; margin: 0 auto; height:150px; margin-top:50px;}
#hotnews h2 {display:block; float:left; width:50px; margin-right:2px; font-size:12px; font-weight:normal; text-align:center; cursor:pointer;}
#hotnews .title_normal {background:#CCC;}
#hotnews .title_current {background:#C2130E; color:#FFF;}
#hotnews ul {position:absolute; left:0px; top:25px; width:300px; padding:8px 0 0 5px; border-top:3px solid #C2130E; font-size:14px
}
.footer {margin-top:50px; border-top:#CCC dashed 1px; text-align:right;}
</style>
</head>
<body>
<div class="wrap">
  <h1>注重結(jié)構(gòu)、語義、用戶體驗的Tab選項卡</h1>
  <div id="hotnews">
    <h2>新聞</h2>
    <ul>
      <li><a href="#">[新聞]轎車逆行撞死斑馬線上7歲后逃逸</a></li>
      <li><a href="#">[新聞]烏魯木齊警方抓捕疑犯遭暴力</a></li>
      <li><a href="#">[新聞]數(shù)據(jù)表對拷程序Delphi控件版</a></li>
    </ul>
    <h2>火炬</h2>
    <ul>
      <li><a href="#">[火炬]轎車逆行撞死斑馬線上7歲學(xué)后逃逸</a></li>
      <li><a href="#">BMP位圖按鈕的VC++實現(xiàn)</a></li>
      <li><a href="#">[火炬]河南駐馬店警方配備寶馬警車</a></li>
    </ul>
    <h2>圖片</h2>
    <ul>
      <li><a href="#">BMP位圖按鈕的VC++實現(xiàn)</a></li>
      <li><a href="#">[圖片]網(wǎng)友創(chuàng)作歌曲"人民心疼你"總理敬意</a></li>
      <li><a href="#">計算機(jī)機(jī)房管理系統(tǒng)Delphi源代碼</a></li>
    </ul>
    <h2>銳點</h2>
    <ul>
      <li><a href="#">計算機(jī)機(jī)房管理系統(tǒng)Delphi源代碼</a></li>
      <li><a href="#">[銳點]阿拉伯媒體稱賴斯正與卡扎菲長子熱戀</a></li>
      <li><a href="#">BMP位圖按鈕的VC++實現(xiàn)</a></li>
    </ul>
  </div>
  <div class="footer">Power By <a href="http://hl5o.cn">ReeQi</a><br/>
    2010.04</div>
</div>
<script>
function $(id){return document.getElementById(id);}
function $tag(id,tagName){return $(id).getElementsByTagName(tagName)}
var onum=0;//用于控制默認(rèn)打開的標(biāo)簽
var Ds=$tag("hotnews","ul");
var Ts=$tag("hotnews","h2");
for(var i=0; i<Ds.length;i++){
	if(i==onum){
		Ds[i].style.display="block";
	    Ts[i].className = "title_current";
		}
	else{
		Ds[i].style.display="none";
	    Ts[i].className = "title_normal";	
	}
	Ts[i].value=i;
    Ts[i].onmouseover=function(){
	   if(onum==this.value){return false;};
       Ts[onum].className="title_normal";
       Ts[this.value].className="title_current";
	   Ds[onum].style.display="none";
	   Ds[this.value].style.display="block";
onum=this.value;
}
}
</script>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時間：2012-11-21

[收藏][報錯][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索注重體驗、語義、兼容的TAB滑動門修正版
特效說明：
菜單導(dǎo)航模板-注重體驗、語義、兼容的TAB滑動門修正版。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

注重體驗、語義、兼容的TAB滑動門修正版_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

注重體驗、語義、兼容的TAB滑動門修正版_菜單導(dǎo)航特效