1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>仿网易TAB标签</title> 
  5. <FCK:META http-equiv=Content-Type content="text/html; charset=gb2312" /> 
  6.   <style type=text/css> 
  7.     BODY {  
  8.       FONT-SIZE: 14px; }  
  9.     OL LI {  
  10.       MARGIN: 8px  
  11.     }  
  12.     #con {  
  13.       FONT-SIZE: 12px;  
  14.       MARGIN: 0px auto;  
  15.       WIDTH: 600px  
  16.     }  
  17.     #tags {  
  18.       PADDING-RIGHT: 0px;  
  19.       PADDING-LEFT: 0px;  
  20.       PADDING-BOTTOM: 0px;  
  21.       MARGIN: 0px 0px 0px 10px;  
  22.       WIDTH: 400px;  
  23.       PADDING-TOP: 0px;  
  24.       HEIGHT: 23px  
  25.     }  
  26.     #tags LI {  
  27.       BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/tagleft.gif) no-repeat left bottom; //标签左拐角的图片  
  28.       FLOAT: left;  
  29.       MARGIN-RIGHT: 1px;  
  30.       LIST-STYLE-TYPE: none;  
  31.       HEIGHT: 23px  
  32.     }  
  33.     #tags LI A {  
  34.       PADDING-RIGHT: 10px;  
  35.       PADDING-LEFT: 10px;  
  36.       BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/tagright.gif) no-repeat right bottom; //标签右拐角的图片  
  37.       FLOAT: left;  
  38.       PADDING-BOTTOM: 0px;  
  39.       COLOR: #999;  
  40.       LINE-HEIGHT: 23px;  
  41.       PADDING-TOP: 0px;  
  42.       HEIGHT: 23px;  
  43.       TEXT-DECORATION: none  
  44.     }  
  45.     #tags LI.emptyTag {  
  46.       BACKGROUND: none transparent scroll repeat 0% 0%;  
  47.       WIDTH: 4px  
  48.     }  
  49.     #tags LI.selectTag {  
  50.       BACKGROUND-POSITION: left top;  
  51.       MARGIN-BOTTOM: -2px;  
  52.       POSITION: relative;  
  53.       HEIGHT: 25px  
  54.     }  
  55.     #tags LI.selectTag A {  
  56.       BACKGROUND-POSITION: right top;  
  57.       COLOR: #000;  
  58.       LINE-HEIGHT: 25px;  
  59.       HEIGHT: 25px  
  60.     }  
  61.     #tagContent {  
  62.       BORDER-RIGHT: #aecbd4 1px solid;  
  63.       PADDING-RIGHT: 1px;  
  64.       BORDER-TOP: #aecbd4 1px solid;  
  65.       PADDING-LEFT: 1px;  
  66.       PADDING-BOTTOM: 1px;  
  67.       BORDER-LEFT: #aecbd4 1px solid;  
  68.       PADDING-TOP:1px;  
  69.       BORDER-BOTTOM: #aecbd4 1px solid;  
  70.       BACKGROUND-COLOR: #fff  
  71.     }  
  72.     .tagContent {  
  73.       PADDING-RIGHT: 10px;  
  74.       DISPLAY: none;  
  75.       PADDING-LEFT: 10px;  
  76.       BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/bg.gif) repeat-x; //显示具体内容的div的背景图片  
  77.       PADDING-BOTTOM: 10px;  
  78.       WIDTH: 576px;  
  79.       COLOR: #474747;  
  80.       PADDING-TOP: 10px;  
  81.       HEIGHT: 250px  
  82.     }  
  83.     #tagContent DIV.selectTag {  
  84.       DISPLAY: block  
  85.     }  
  86.   </style> 
  87.   <script type=text/javascript> 
  88.     function selectTag(showContent,selfObj){  
  89.      var tag = document.getElementById("tags").getElementsByTagName("li");  
  90.      var tagtaglength = tag.length;  
  91.      for(i=0; i<taglength; i++){  
  92.       tag[i].className = "";  
  93.      }  
  94.      selfObj.parentNode.className = "selectTag";  
  95.      for(i=0; j=document.getElementById("tagContent"+i); i++){  
  96.       j.style.display = "none";  
  97.      }  
  98.      document.getElementById(showContent).style.display = "block";  
  99.     }  
  100.   </script> 
  101. </head> 
  102. <body> 
  103.   <DIV id=con> 
  104.     <UL id=tags> 
  105.       <LI class="selectTag"><A onClick="selectTag('tagContent0',this)" href="javascript:void(0)">CSS中国</A> </LI> 
  106.       <LI><A onClick="selectTag('tagContent1',this)"   href="javascript:void(0)">DIV+CSS教程</A> </LI> 
  107.       <LI><A onClick="selectTag('tagContent2',this)"   href="javascript:void(0)">自适应宽度的标签</A> </LI> 
  108.     </UL> 
  109.     <DIV id=tagContent> 
  110.       <DIV style="display:block;" class=tagContent id=tagContent0>DIV+CSS教程CSS中国</DIV> 
  111.       <DIV class="tagContent" id=tagContent1>这时是DIV+CSS教程标签的内容。</DIV> 
  112.       <DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV> 
  113.     </DIV> 
  114.   </DIV> 
  115. </body> 
  116. </html>