标签示例

本文发布于 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>