JavaScript和css实现tab样式

最新推荐文章于 2024-04-19 20:39:07 发布

xyzchen126

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量130

点赞数

分类专栏： JavaScript 文章标签： CSS JavaScript Ajax Microsoft 应用服务器 ViewUI

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[color=orange]

html部分 比较简单哈
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选项卡</title>
<link rel="stylesheet" media="all" type="text/css" href="inc/style.css" />
<script type="text/javascript" src="inc/tab.js"></script>
</head>
<body>
<div id="first">
	<div class="on" title="tab1">tab1</div>
	<div class="off" title="tab2">tab2</div>
	<div class="off" title="tab3">tab3</div>
	<div class="off" title="tab4">tab4</div>
	<div class="off" title="tab5">tab5</div>
</div>

<div class="show" id="tab1">
	tab1的内容
</div>
<div class="hide" id="tab2">
	tab2的内容
</div>
<div class="hide" id="tab3">
	tab3的内容
</div>
<div class="hide" id="tab4">
	tab4的内容
</div>
<div class="hide" id="tab5">
	tab5的内容
</div>
</body>
</html>
需要注意的是下面的div的id值要和上面的5个div的title一直，这样子在js文件中可以进行一系列的操作
css内容
@CHARSET "UTF-8";
body {
	background-color:#f3f3f3;
	font-family:"Arial Narrow";
	font-size:13px;
}

#first {
	width:700px;
}

#first div.off {
	margin-right:2px;
	padding:0 20px;
	height:33px;
	background:url(tabs_0.gif) repeat-x bottom;
	border:1px #ddd solid;
	float:left;
	cursor:pointer;
	border-bottom-color:#000;
	line-height:32px;
	z-index:40;
	position:relative;
}

#first div.on {
	margin-right:2px;
	padding:0 20px;
	height:33px;
	position:relative;
	margin-top:1px;
	background:url(tabs_2.gif) repeat-x bottom;
	float:left;
	cursor:pointer;
	border:1px #000 solid;
	border-bottom:0;
	z-index:100;
	line-height:33px;
}

div.hide {
	width:0px;
	display:none;
	overflow:hidden;
}

div.show {
	clear:left;
	width:720px;
	height:200px;
	padding:20px;
	top:-1px;
	position:relative;
	border:1px solid #000;
	z-index:50;
}
.clear {
	clear:both;
}

js代码  可以在js中添加Ajax的应用，即点击tab的时候从服务器端请求数据
//综合ajax的应用在tab中 通过tab的标签获得该标签下的要显示的内容
window.onload = function() {
	var tab = document.getElementById("first");
	var divs = tab.getElementsByTagName("div");
	var responseContent;
	for(var i = 0;i<divs.length;i = i+1) {
		divs[i].onclick = function() {
			//ajax的应用
//			var text = this.innerHTML;
//			var http = createXMLHttp();
//			var url = "";
			//true即为异步方式传输数据
//			http.open("get",url,true);
//			http.onreadystatechange = function() {
				//表示传输完成
//				if(http.readyState == 4) {
//					responseContent = http.responseText;
//				}
//			}

			if(this.className == "on") {
				return false;
			} else {
				//得到状态为on的tab
				var status = getStatus(divs);
				var title = this.title;
				this.className = "on";
				document.getElementById(title).className = "show";
				document.getElementById(status).className = "hide";
				return true;
			}
		}
	}
}

//这里有点复杂，是为了考虑到如果用Ajax来请求数据的话这样子比较好将内容嵌入到div中，暂时还没有找到别的好点的办法。
//找到状态为on的那个tab 将状态设置为off
function getStatus(divs) {
	var tabId;
	for(var i=0;i<divs.length;i=i+1) {
		if(divs[i].className == 'on') {
			divs[i].className = "off";
			tabId = divs[i].title;
			break;
		} else {
			continue;
		}
	}
	return tabId;
}

//创建xmlhttp
function createXMLHttp() {
	var request;
	var browser = navigator.appName;
	if(browser == "microsoft internet explorer") {
		var versions = ["Microsoft.XMLHttp","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"];
		for(var i=0;i<versions.length;i++) {
			try {
				request = new ActiveXObject(versions[i]);
				return request;
			} catch(e) {}
		}
	} else {
		request = new XMLHttpRequest();
		return request;
	}
}

[/color]