簡約CSS滑動(dòng)門 (Tabs)_菜單導(dǎo)航特效

簡約型TABS選項(xiàng)卡，CSS滑動(dòng)門代碼，一個(gè)實(shí)現(xiàn)的基本雛形，重要的技術(shù)點(diǎn)已經(jīng)幫你實(shí)現(xiàn)，至于你用時(shí)候怎么改，要自己發(fā)揮一下哦，無非是增加一個(gè)框內(nèi)的ul、li列表，這個(gè)很好定義。

<!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=gb2312" />
<title>滑動(dòng)門</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	font-size:12px;
}
body{
	margin:5px;
}
.Tab{
	width:300px;
}
.TabBar{
	width:300px;
	list-style-type:none;
	overflow:auto;
}.TabBarNormal
{
	float:left;
	width:60px;
	border:1px solid #0066cc;
	border-bottom:0px solid #fff;
	line-height:24px;
	text-align:center;
	margin:0 3px;
	
}
.TabBarActive{
	float:left;
	width:60px;
	border:1px solid #0066cc;
	border-bottom:0px solid #fff;
	background-color:#CCCCCC;
	line-height:25px;
	text-align:center;
	margin:0 3px;
	color:red
}
.TabContent{
	width:98%;
	height:200px;
	border:1px solid #0066cc;
	padding:5px;
	position:absolute;
	margin-top:-1px;
}
</style>
</head>
<body>
<div class="Tab">
	<ul class="TabBar">
	<li id="tab1" class="TabBarActive" onmouseover="showTab(1);"><a href="/other/lastupdate.shtml">最新更新</a></li>
	<li id="tab2" class="TabBarNormal" onmouseover="showTab(2);"><a href="/other/top100.shtml">下載排行</a></li>
	<li id="tab3" class="TabBarNormal" onmouseover="showTab(3);"><a href="/other/top100.shtml">軟件更新</a></li>
	</ul>
	<div class="TabContent" id="tabContent1">這里是最新更新</div>
	<div class="TabContent" id="tabContent2" >這里是下載排行，<a href="/">mb5u.com</a>提供有質(zhì)量源碼下載。</div>
	<div class="TabContent" id="tabContent3" >這里是軟件更新</div>
</div>
<script type="text/javascript">
var activeTab =1;
var activeTabContent = 1;
var i;
for (i=2;i<=3;i++) {
	document.getElementById("tabContent"+i).style.display="none";
}
function showTabContent(n) {
	document.getElementById("tabContent"+activeTabContent).style.display="none";
	document.getElementById("tabContent"+n).style.display="";
	activeTabContent=n;
}
function showTab(n) {
	document.getElementById("tab"+activeTab).className="TabBarNormal";
	document.getElementById("tab"+n).className="TabBarActive";
	activeTab=n;
	showTabContent(n);
}
</script>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

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

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

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

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索簡約CSS滑動(dòng)門 (Tabs)
特效說明：
菜單導(dǎo)航模板-簡約CSS滑動(dòng)門 (Tabs)。

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

簡約CSS滑動(dòng)門 (Tabs)_菜單導(dǎo)航特效

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

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

猜你也喜歡看這些