windows选项卡效果(简化版)

<style type="text/css">
<!--
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background: #D6D3CE;
font-size: 14px;
font-weight:bold;
color: #000000;
}
#top{
width:739px;
height:65px;
background: #D6D3CE url(top.gif) no-repeat;
}
#bottom {
width:739px;
height:45px;
background: #D6D3CE url(bottom.gif) no-repeat 615px 0px;
font-size:12px;
font-weight:normal;
text-align:left;
padding:22px 0 0 22px;
}
#container {
text-align: left;
width: 717px;
margin: 0 11px;
background: #D6D3CE;
}
#conleft{
float:left;
width:134px;
height:296px;
border: 1px #7B9EBC solid;
background:#FFF;
text-align:center;
padding-top:10px;
}
#conright{
float:right;
width:550px;
height:306px;
border: 1px #7B9EBC solid;
background:#FFF;
}
#container #title {
height: 28px;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
background: #D6D3CE;
height: 28px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
height: 300px;
padding: 10px;
}
.content1 {
border: 1px #94999C solid ;
background: #EFE6E7;
}
.content2 {
border: 1px #94999C solid ;
background: #EFE6E7;
}
.content3 {
border: 1px #94999C solid ;
background: #EFE6E7;
}
.hidecontent {display:none;}
/*-----------Tags-----------*/
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
background: url(tagleft.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(tagright.gif) no-repeat right -29px;
padding: 0 25px 0 25px;
}
#container #title #tag1 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(tagleft.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(tagright.gif) no-repeat right -87px;
padding: 0 25px 0 25px;
}
#container #title #tag2 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(tagleft.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(tagright.gif) no-repeat right 0px;
padding: 0 25px 0 25px;
}
#container #title #tag3 a:hover {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(tagleft.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(tagright.gif) no-repeat right -58px;
padding: 0 25px 0 25px;
}
#container #title .selectli1 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(tagleft.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(tagright.gif) no-repeat right -87px;
padding: 0 25px 0 25px;
}
#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(tagleft.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(tagright.gif) no-repeat right 0px;
padding: 0 25px 0 25px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(tagleft.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(tagright.gif) no-repeat right -58px;
padding: 0 25px 0 25px;
}

-->
</style>
<!-------------去掉连接的虚线框----------------->
<script>
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>
<!----------------标签设计--------------------->
<script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <3; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
</script>
</head>
<body>
<div id="top"></div>
<div id="container">
<div id="title">
<ul>
<li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">金翅擘海</span></a></li>
<li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></span></a></li>
<li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>子虚乌有</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1">说老实话，办老实事，做老实人。
说谎话的不仅没糖吃，而且还有可能被狼吃掉......</div>
<div id="content2" class="hidecontent">虚心、踏实、坚韧的学习
老虎不发猫，你当我病危？——蓝色语</div>
<div id="content3" class="hidecontent">klklklklklkl</div>
</div>
</div>
<div id="bottom">marvellous ©版权所有2000-2006</div>
</body>