简单JS滑动门代码

最新推荐文章于 2021-08-03 19:03:11 发布

weixin_33795833

最新推荐文章于 2021-08-03 19:03:11 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/webdm/archive/2011/04/14/2015777.html

版权

代码简介：

简约型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>简单JS滑动门代码_网页代码站(www.webdm.cn)</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" οnmοuseοver="showTab(1);"><a href="/">最新更新</a></li>
	<li id="tab2" class="TabBarNormal" οnmοuseοver="showTab(2);"><a href="/">下载排行</a></li>
	<li id="tab3" class="TabBarNormal" οnmοuseοver="showTab(3);"><a href="/">软件更新</a></li>
	</ul>
	<div class="TabContent" id="tabContent1">这里是最新更新</div>
	<div class="TabContent" id="tabContent2" >这里是下载排行，<a href="http://webdm.cn">WebDm.CN</a>提供高

质量代码下载。</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>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/6a817b81-a842-4ff3-b5a8-5f664ee433e2.html

转载于:https://www.cnblogs.com/webdm/archive/2011/04/14/2015777.html

weixin_33795833

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单JS滑动门代码

代码简介：简约型TABS选项卡，CSS滑动门代码，一个实现的基本雏形，重要的技术点已经帮你实现，至于你用时候怎么改，要自己发挥一下哦，无非是增加一个框内的ul、li列表，这个很好定义。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...
复制链接

扫一扫