JQuery 选项卡参考 样式及代码说明

.tabs  {  //ul

1. height: 32px;
2. border-bottom: 1px solid  #999 ;
3. border-left: 1px solid  #999 ;
4. width: 100%;
5. 
   
6. 
   
7. }

.tabs li  {  //ul li

1. height: 31px;
2. line-height: 31px;
3. float: left;
4. border: 1px solid  #999 ;
5. border-left: none;
6. margin-bottom: -1px;   //针对ul外边框向上移动1像素
7. background:  #e0e0e0 ;
8. 
   

}

.tabs li:hover{

  background:#fff;

  border-bottom:1px solid #fff;

}

JQuery 代码

index() //获取当前选中的索引

siblings() //对同级做响应的处理

eq() //找到与其相等的索引 执行操作

$(this).addClass("whitebg").siblings().removeClass("whitebg");
$(".tabbox").hide().eq(liIdx).show();