刚来公司很多事情都要学习~~这几天在做一个需求项目时碰到了一个交互的问题：
有如下视觉交互稿：
这边的Tab切换头部根据规范只能放一个ul中的li实现，想当然的情况下对于当前Tab采用左右边框处理，在未触发的Tab中采用一个靠右的背景作为分隔符标示。大致代码如下，目标是在未改变下列html情况下实现上述交互~
?
<ul class="tab-title"> <li class="f-tab-t first-row current">空运</li> <li class="f-tab-t">货代</li> <li class="f-tab-t">仓储配送</li> <li class="f-tab-t last-row">商检报关</li> </ul>
但是假如采用背景right对齐tab的话，可能会导致有当前的Tab的前一个tab显示right背景，使布局显得很不协调，入下列的情况：
注意箭头这里会出现一个宽度为一像素的冗余块，当然这边一像素虽然不算什么，但是要是背景大概4px的话就会比较明显了，从体验角度还是要进行处理。
?
下面给出我的两种方法：
对于当前的tab设置下列css：
?
li.current{
margin-left:-1px;
}
? 使外面的tab盖住左边的背景，不失为一种纯css的好方法，但是如此一来左右Tab会出现抖动，必须通过padding来细微调整抖动的宽度。
?
还有一种方法是通过Tab组件的回调函数进行背景的切换，因为本身是用了tab组件js了，所以也没有访问性不访问性的问题了。
大致代码如下（省略YUI库代码）：
?
(function(){
var getSibling = function(node){
var ancestorNode = YAHOO.util.Dom.getAncestorByClassName(node,'tab-title');
return YAHOO.util.Dom.getChildren(ancestorNode);
}
var tab = new FD.widget.Tab('freight-tab', {
eventType: 'click',
isAutoPlay: false
callback:function(index,tabTitle,tabBox){
if(index >= 0 && index < 4){
YAHOO.util.Dom.removeClass(getSibling(tabTitle),'no-bg');
var _preNode = YAHOO.util.Dom.getPreviousSibling(tabTitle);
YAHOO.util.Dom.addClass(_preNode,'no-bg');
}
}
});
})();
? 对于这种有分隔符的Tab还是感觉比较诡异。一般的有分隔符的都是作为navigation来使用：
比如一：
? 这边是一个navigation，但为了方便右边的left背景还是没有去掉，从交互角度看这个的确是不能留的。
但有一种还是可以接受的，如下图：
? 上面的Tab和分割线距离很大是，可以认为是一个不对等的个体，当前Tab的存在和分割线是不互斥的~~
?
这边还想写一下做上面这个Tab切换的一些问题，由于要在父标签中添加border-bottom,则在当前标签下border-bottom为#FFF，采用以下css搞定：
?
li.current{
text-align:center;
color:#BC1D1D;
width:72px;
line-height:28px;
padding:0 8px;
background:url(../images/bg.png) #FFF 0 -185px repeat-x;
border-right:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:#FFF 1px solid;
font-weight:bold;
margin-bottom:-1px;
_margin-left:-1px;
_overflow:visible;
_position:relative;
_z-index:3;
}
? 对于A级非IE6采用margin-bottom:-1px;已经能解决问题了，但是貌似IE6下不能解决，于是采用了设为相对定
位并设置z-index就能解决问题了，同时在解决字体变为bold时的抖动问题时可以将li定宽，宽定到最大字符所需的宽就行，然后设置固定padding的左右值就可以起到消除抖动的功效。
那个啥YUI的源代码学习放到以后写~~
?
?
?