简约CSS滑动门 (Tabs)

2024-09-05 12:19:23

字体：大中小

来源：转载

供稿：网友

简约型TABS选项卡，CSS滑动门代码，一个实现的基本雏形，重要的技术点已经帮你实现，至于你用时候怎么改，要自己发挥一下哦，无非是增加一个框内的ul、li列表，这个很好定义。

<!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" content="text/html; charset=gb2312" /><title>滑动门</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);">最新更新</li>	<li id="tab2" class="TabBarNormal" onmouseover="showTab(2);">下载排行</li>	<li id="tab3" class="TabBarNormal" onmouseover="showTab(3);">软件更新</li>	</ul>	<div class="TabContent" id="tabContent1">这里是最新更新</div>	<div class="TabContent" id="tabContent2" >这里是下载排行</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>

上一篇：鼠标滑过变色的菜单栏

下一篇：QQ网站的选项卡、滑动门菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注