标签示例
本文发布于 16 年前，部分内容可能已经失去参考价值。
代码
<!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>
<title>标签示例</title>
<style type="text/css">
BODY { font-size: 14px; font-family: "宋体"; }
OL LI { margin: 8px; }
#con { font-size: 12px; margin: 0px auto; width: 600px; }
#tags { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 0px 10px; width: 400px; padding-top: 0px; height: 23px; }
#tags LI { background: url(images/tagleft.gif) no-repeat left bottom; float: left; margin-right: 1px; list-style-type: none; height: 23px; }
#tags LI A { padding-right: 10px; padding-left: 10px; background: url(images/tagright.gif) no-repeat right bottom; float: left; padding-bottom: 0px; color: #999; line-height: 23px; padding-top: 0px; height: 23px; text-decoration: none; }
#tags LI.emptyTag { background: none transparent scroll repeat 0% 0%; width: 4px; }
#tags LI.selectTag { background-position: left top; margin-bottom: -2px; position: relative; height: 25px; }
#tags LI.selectTag A { background-position: right top; color: #000; line-height: 25px; height: 25px; }
#tagContent { border-right: #aecbd4 1px solid; padding-right: 1px; border-top: #aecbd4 1px solid; padding-left: 1px; padding-bottom: 1px; border-left: #aecbd4 1px solid; padding-top: 1px; border-bottom: #aecbd4 1px solid; background-color: #fff; }
.tagContent { padding-right: 10px; display: none; padding-left: 10px; background: url(images/bg.gif) repeat-x; padding-bottom: 10px; width: 576px; color: #474747; padding-top: 10px; height: 350px; }
#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>
<script type="text/javascript">
function selectTag(showContent, selfObj) {
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for (i = 0; i < taglength; i++) {
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for (i = 0; j = document.getElementById("tagContent" + i); i++) {
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</body>
</html>
匿
转自
网络（如侵权请联系删除）
16 年前
可能相关的内容
