<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<META content="MSHTML 6.00.2800.1589" name="GENERATOR"></HEAD>
<title>无标题文档</title>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li")
var taglength = tag.length
for(i=0i<taglengthi++){
tag[i].className = ""
}
selfObj.parentNode.className = "selectTag"
// 操作内容
for(i=0j=document.getElementById("tagContent"+i)i++){
j.style.display = "none"
}
document.getElementById(showContent).style.display = "block"
}
</SCRIPT>
<STYLE type=text/css>
BODY {
FONT-SIZE: 14pxFONT-FAMILY: "宋体"
}
OL LI {
MARGIN: 8px
}
#con {
FONT-SIZE: 12pxMARGIN: 0px autoWIDTH: 373px}
#tags {
PADDING-RIGHT: 0pxPADDING-LEFT: 0pxPADDING-BOTTOM: 0pxMARGIN: 0px 0px 0px 5pxWIDTH: 400pxPADDING-TOP: 0pxHEIGHT: 23px
}
#tags LI {
BACKGROUND: url(images/mainlanmu_01.gif) no-repeat left bottomFLOAT: leftMARGIN-RIGHT: 1pxLIST-STYLE-TYPE: noneHEIGHT: 21px
}
#tags LI A {
PADDING-RIGHT: 10pxPADDING-LEFT: 10pxBACKGROUND: url(images/mainlanmu_02.gif) no-repeat right bottomFLOAT: leftPADDING-BOTTOM: 0pxCOLOR: #999LINE-HEIGHT: 21pxPADDING-TOP: 0pxHEIGHT: 21pxTEXT-DECORATION: none
font-family:"幼圆"
font-weight:bold
font-size:14px
}
#tags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%WIDTH: 4px
}
#tags LI.selectTag {
BACKGROUND-POSITION: left topMARGIN-BOTTOM: -2pxPOSITION: relativeHEIGHT: 23px
}
#tags LI.selectTag A {
BACKGROUND-POSITION: right topCOLOR: #1d71e3LINE-HEIGHT: 23pxHEIGHT: 23pxfont-family:"幼圆"
font-weight:bold
font-size:14px
}
#tagContent {
BORDER-RIGHT: #aecbd4 1px solidPADDING-RIGHT: 1pxBORDER-TOP: #aecbd4 1px solidPADDING-LEFT: 1pxPADDING-BOTTOM: 1pxBORDER-LEFT: #aecbd4 1px solidPADDING-TOP: 1pxBORDER-BOTTOM: #aecbd4 1px solidBACKGROUND-COLOR: #fff
}
.tagContent {
PADDING-RIGHT: 10pxDISPLAY: nonePADDING-LEFT: 10px PADDING-BOTTOM: 10pxWIDTH: 576pxCOLOR: #474747PADDING-TOP: 10pxHEIGHT: 250px
}
#tagContent DIV.selectTag {
DISPLAY: block
}
</STYLE>
</head>
<body>
<DIV id="con">
<UL id="tags">
<LI><A onClick="selectTag('tagContent0',this)"
href="javascript:void(0)">标签一</A></LI>
<LI class="selectTag"><A onClick="selectTag('tagContent1',this)"
href="javascript:void(0)">标签二</A></LI>
<LI><A onClick="selectTag('tagContent2',this)"
href="javascript:void(0)">自适应宽度的标签</A></LI></UL>
<DIV id="tagContent">
<DIV class="tagContent" id="tagContent0">第一个标签的内容</DIV>
<DIV class="tagContent selectTag" id="tagContent1">第二个标签的内容</DIV>
<DIV class="tagContent" id="tagContent2">第三个标签的内容</DIV></DIV></DIV>
</body>
</html>
