Tab切换和诡异的交互之讨论
刚来公司很多事情都要学习~~这几天在做一个需求项目时碰到了一个交互的问题：
有如下视觉交互稿：
这边的Tab切换头部根据规范只能放一个ul中的li实现，想当然的情况下对于当前Tab采用左右边框处理，在未触发的Tab中采用一个靠右的背景作为分隔符标示。大致代码如下，目标是在未改变下列html情况下实现上述交互~
?
<ul alt="Tab切换跟诡异的交互之讨论">注意箭头这里会出现一个宽度为一像素的冗余块，当然这边一像素虽然不算什么，但是要是背景大概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: falsecallback: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的源代码学习放到以后写~~
?
?
?
