加了点料的选项卡效果

　　补上前篇文章所说的“图二”选项卡实例。

　　类似的效果，其实我之前已经写过了（不规则背景图片滑动门），这里篇文章主要是为了说明上篇文章的“合理性”及“良好的用户体验”，不阐述其它的问题。

　　［演示地址：http://www.doyoe.com/model/tabstrip/tabstrip4/5.htm］

CSS部分：

.hide {
 display:none;
}
#tab_1 {
 width:423px;
 overflow:hidden;
}
#tab_1 h3 {
 width:100%;
 margin:0 0 1px 0;
 font:12px/21px "宋体";
 overflow:hidden;
}
#tab_1 h3 a {
 margin:0 -16px;
 padding-right:27px;
 color:#760036;
 background:url(skin/tab_menub.gif) right top no-repeat;
 text-decoration:none;
 float:left;
}
#tab_1 h3 a span {
 padding-left:27px;
 background:url(skin/tab_menub.gif) left top no-repeat;
 cursor:pointer;
 float:left;
}
#tab_1 h3 a span.first {
 background:url(skin/tab_menub.gif) left -84px no-repeat;
}
#tab_1 h3 a span span {
 padding:0 25px;
 background:url(skin/tab_menub.gif) center -21px repeat-x;
 float:left;
}
#tab_1 h3 a:hover,#tab_1 h3 a.index {
 background-position:right -42px;
 position:relative;
 z-index:99;
}
#tab_1 h3 a:hover span span,#tab_1 h3 a.index span span {
 background-position:center -63px;
}
#tab_1 h3 a:hover span,#tab_1 h3 a.index span {
 background-position:left -42px;
 position:relative;
 z-index:99;
}
#tab_1 h3 a:hover span.first,#tab_1 h3 a.index span.first {
 background-position:left -105px;
}
#tab_1 ul {
 margin:0;
 padding:0;
 list-style:none;
 font:12px/180% "宋体";
 color:#000;
 background-color:#eee;
} 

XHTML部分：

<div id="tab_1">
  <h3>
    <a id="a1" href="javascript:void(0);" οnmοuseοver="dyts.showtab(0);dyts.clearautoshow();" οnmοuseοut="dyts.autoshow();"><span class="first"><span>美 容</span></span></a>
    <a id="a2" href="javascript:void(0);" οnmοuseοver="dyts.showtab(1);dyts.clearautoshow();" οnmοuseοut="dyts.autoshow();"><span><span>服 饰</span></span></a>
    <a id="a3" href="javascript:void(0);" οnmοuseοver="dyts.showtab(2);dyts.clearautoshow();" οnmοuseοut="dyts.autoshow();"><span><span>健 康</span></span>
    </a><a id="a4" href="javascript:void(0);" οnmοuseοver="dyts.showtab(3);dyts.clearautoshow();" οnmοuseοut="dyts.autoshow();"><span><span>专 题</span></span></a>
  </h3>
  <ul id="nra1" class="hide">
    <li>第一选项内容</li>
    <li>第一选项内容</li>
  </ul>
  <ul id="nra2" class="hide">
    <li>第二选项内容</li>
    <li>第二选项内容</li>
  </ul>
  <ul id="nra3" class="hide">
    <li>第三选项内容</li>
    <li>第三选项内容</li>
  </ul>
  <ul id="nra4" class="hide">
    <li>第四选项内容</li>
    <li>第四选项内容</li>
  </ul>
</div> 

JS部分：

function dytabstrip(){
 var dh = this;
 //定义TabStrip标签内容对象
 this.tabobj = [];
 //定义当前标签索引；
 this.nowindex = null;
 //定义自动展示变量
 this.autoid = null;
 this.startindex = 0;
 this.timeset = 3000;
 //添加标签及内容
 this.addtab = function(tab,content){
  this.tabobj[this.tabobj.length] = {"tab":tab,"content":content};
 }
 //展示指定索引的标签内容
 this.showtab = function(index){
  if(isNaN(index) || index<=0 || index>=this.tabobj.length){
   index = 0;
  }
  if(this.tabobj.length>0){
   this.tabobj[index].tab.className = "index";
   this.tabobj[index].content.style.display = "block";
   if(this.nowindex != null && index != this.nowindex){
    this.tabobj[this.nowindex].tab.className = "";
    this.tabobj[this.nowindex].content.style.display = "none";
   }
   this.nowindex = index;
   this.startindex = index;
  }
 }
 //自动展示
 this.autoshow = function(){
  if(this.startindex>=this.tabobj.length){
   this.startindex = 0;
  }
  this.showtab(this.startindex);
  this.startindex += 1;
  this.autoid = window.setTimeout(function(){dh.autoshow()},this.timeset)
 }
 //清除自动展示
 this.clearautoshow = function(){
  window.clearTimeout(this.autoid);
 }
}

 var dyts = new dytabstrip();
 dyts.addtab(document.getElementById("a1"),document.getElementById("nra1"));
 dyts.addtab(document.getElementById("a2"),document.getElementById("nra2"));
 dyts.addtab(document.getElementById("a3"),document.getElementById("nra3"));
 dyts.addtab(document.getElementById("a4"),document.getElementById("nra4"));
 dyts.autoshow();

　　该实例顺便加了一个“自动切换”的效果（支持多Tabstrip），和“手动切换”混合使用，相得益彰。不过也要看时候使用，并不是在任何场合都适用。