利用 dl dt 以及 CSS 寫出一個簡單 tab 功能

tab 在網頁中常常會用到，網路上範例不少，自己寫了一個給初學的朋友參考:

HTML:
<div id="tabs">
<dl style="left:0; width:1580px;">
<dt><a title="baskball">棒球</a></dt>
<dt><a title="basketball">籃球</a></dt>
<dt><a title="dance">舞蹈</a></dt>
<dt><a title="swim">游泳</a></dt>
<dt><a title="Race">田徑</a></dt>
</dl>
</div>


CSS:
div{
  display:block;
}

body, dl, dt
{
  padding:0;
  margin:0;
}

dt{display:block;}

#tabs{
  display:block;
  width:530px;
  position:absolute;
  left:38px;
  overflow:hidden;
  height:46px;
  border-top:1px solid #d7d7d7;
  border-bottom:1px solid #d7d7d7;
  z-index:99;
}

#tabs a{
  display:block;
  height:46px;
  float:left;
  color:rgb(0,84,166);
  position:relative;
  width:102px;
  text-align:center;
  font-family:Helvetica, Arial;
  font-size:13px;
  line-height:46px;
  background:#00fff00 100% -1000px no-repeat;
  border:1px solid black;
  margin:1px;
}

#tabs a.on,#tabs a:hover{
  background-color:#6fb1f0;
  color:#fff;
}

a{
  outline:0;
  cursor:pointer;

}

JQuery:
// ps: 每 5s 切換一次<a>顏色
var pos=0;
setInterval(function()
{
   if (pos == 0)
  {
      // 給定初始值
      $("dt a:eq(0)").css("color","green");
      $("dt a:eq(1)").css("color","red");
      $("dt a:eq(2)").css("color","red");
      $("dt a:eq(3)").css("color","red");
      $("dt a:eq(4)").css("color","red");  
  }
  else
  {
      var prev = pos-1;
      $("dt a:eq(" + prev + ")").css("color","red");
      $("dt a:eq(" + pos + ")").css("color","green");
  }
  pos++;

   if (pos > 4) pos = 0;
}, 5000);