大氣簡潔橫向滑動門HTML代碼
大氣簡潔橫向滑動門HTML代碼如下：
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>無標(biāo)題文檔</title>
</head>
<style>
* {margin: 0px;padding: 0px;outline:none;border:0px;}
input {border:0px; font-size:12px}
img{margin:0px; padding:0px; border:0px}
body {font-family: "宋體", Arial, "微軟雅黑";font-size: 12px;color: #333;behavior:url("css/csshover.htc"); /*調(diào)用該htc文件,使ie6下支持div:hover屬性*/
background:#fff;}
ul {list-style-type: none;}
a {text-decoration:none}
html {overflow-x:hidden;overflow-y:auto;}
/* 標(biāo)準(zhǔn)盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border-top:0;}
.w670{margin:2px 0;clear:both;width:670px;/*滑動門的寬度*/}
/* TAB 切換效果 */
.tb_{height:36px; border-bottom:#f60 6px solid ;}
.tb_ ul{height:30px;}
.tb_ li{float:left;cursor:pointer;margin-right:4px; margin-left:0px;font-family:"微軟雅黑"; font-size:16px;}
/* 控制顯示與隱藏css類 */
.normaltab { padding:10px 10px 10px 10px;}
.hovertab { float:left;padding:10px 10px 10px 10px;background:#f60; margin-top:0px;}
.dis{display:block;}
.dis li{margin-top:10px; line-height:20px; font-size:14px; font-family:"微軟雅黑"; border-bottom:#f60 1px dotted}
.dis span{ float:right; padding-right:8px;}
.undis{display:none;}
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N個標(biāo)簽,就將i<=N;
for(var i=1;i<=8;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成點擊后再轉(zhuǎn)到請將<li>中的onmouseover 改成 onclick;
//]]>
</script>
<body>
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onclick="x:HoverLi(1);">
全區(qū)</li>
<li id="tb_2" class="normaltab" onclick="i:HoverLi(2);">
市中心</li>
<li id="tb_3" class="normaltab" onclick="a:HoverLi(3);">
西北面</li>
<li id="tb_4" class="normaltab" onclick="o:HoverLi(4);">
東北面</li>
<li id="tb_5" class="normaltab" onclick="g:HoverLi(5);">
西南面</li>
<li id="tb_6" class="normaltab" onclick="z:HoverLi(6);">
東南面</li>
<li id="tb_7" class="normaltab" onclick="z:HoverLi(7);">
st.Albert</li>
<li id="tb_8" class="normaltab" onclick="z:HoverLi(8);">
Sherwood Park</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">這里是1111111111111111111111</div>
<div class="undis" id="tbc_02">這里是2222222222222222222</div>
<div class="undis" id="tbc_03">這里是3333333333333 </div>
<div class="undis" id="tbc_04">這里444444444444444444444444444444444</div>
<div class="undis" id="tbc_05">這里是555555555555555555</div>
<div class="undis" id="tbc_06">這里是66666666666666666666666 </div>
<div class="undis" id="tbc_07">這里是777777777777777777777777777 </div>
<div class="undis" id="tbc_08">這里是88888888888888888888888888888
</div>
</div>
</body>
</html>
聲明：
1.本站主要是為了記錄工作、學(xué)習(xí)中遇到的問題，可能由于本人技術(shù)有限，內(nèi)容難免有紕漏，一切內(nèi)容僅供參考。
2.本站部分內(nèi)容來源互聯(lián)網(wǎng),如果有圖片或者內(nèi)容侵犯您的權(quán)益請聯(lián)系我們刪除！
3.本站所有原創(chuàng)作品，包括文字、資料、圖片、網(wǎng)頁格式，轉(zhuǎn)載時請標(biāo)注作者與來源。
1.本站主要是為了記錄工作、學(xué)習(xí)中遇到的問題，可能由于本人技術(shù)有限，內(nèi)容難免有紕漏，一切內(nèi)容僅供參考。
2.本站部分內(nèi)容來源互聯(lián)網(wǎng),如果有圖片或者內(nèi)容侵犯您的權(quán)益請聯(lián)系我們刪除！
3.本站所有原創(chuàng)作品，包括文字、資料、圖片、網(wǎng)頁格式，轉(zhuǎn)載時請標(biāo)注作者與來源。
THE END
