选项卡代码-CSDN博客

关于选项卡的代码太多太多，但是很多都过于复杂，最近在老公的帮助下整出了一个较为精简的，发布上来与大家分享。

window.οnlοad=function(){
	var dl1=document.getElementById("fra_head_ft_1");
	var dl2=document.getElementById("fra_head_ft_2");
	
	dl1.οnclick=function(){
		var dc1=document.getElementById("fra_ft_1");
		var dc2=document.getElementById("fra_ft_2");
		if(this.className=='classBefore'){
			this.className ="classCurrent";
			dl2.className ="classBefore";
			dc1.style.display="inline";
			dc2.style.display="none";
		}
	};
	
	dl2.οnclick=function(){
		if(this.className=='classBefore'){
			var dc1=document.getElementById("fra_ft_1");
			var dc2=document.getElementById("fra_ft_2");
			this.className ="classCurrent";
			dl1.className ="classBefore";
			dc2.style.display="inline";
			dc1.style.display="none";
		}
	};
};

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
.caption { height:26px; color:#188101; background:url(../images/captionbj.gif) no-repeat right 0; font-weight:bold; font-size:14px; }
.caption ul {
 height:24px; background:url(../images/captionL.gif) no-repeat 0 0; padding:2px 2px 0 10px; float:left;
}
.caption LI {
 float:left; height:24px; margin-right:5px; width:72px;text-align:center;
 line-height:17px; 

}
.caption LI A {
 text-decoration:none;
}
.classBefore ,.classCurrent { cursor:pointer; }
.caption LI.classCurrent{
 padding:4px 4px 0 ; background:url(../images/current.gif) no-repeat; filter:none;
}
.content_right { border:1px solid #CAE99B; border-top:none; height:110px; padding:15px 0!important; padding:23px 0 15px; margin:0!important; margin:-8px 0 0 }
-->
</style>
<script language="javascript" src="js/login.js"></script>
</head>
<body>
<div class="caption">
    <ul>
        <li class="classCurrent" id="fra_head_ft_1"><span>网站</span></li>
        <li class="classBefore" id="fra_head_ft_2"><span>邮箱</span></li>
    </ul>
</div>
<div class="content_right frame">
    <div style="display: inline;" id="fra_ft_1">
        第一个
    </div>
    <div style="display: none;" id="fra_ft_2">
        第二个
    </div>
</div>
</body>
</html>

这里的CSS只针对重要的DIV设定了属性，用到具体的地方还得因地制宜为DIV添加CSS的，这个懒偷不了。