Tab选项卡切换

Demo是这样子的：



麻烦之处在于当鼠标移动到骑士和火箭上是增加的border会与外面的div的border重叠

就像这样:



这样显然不好，一点都不美观

那怎么变美观呢？

我们先把结构弄出来：

<div class="tab">
<ul>
<li><a href="javascript:;">骑士</a></li>
<li><a href="javascript:;">绿军</a></li>
<li><a href="javascript:;">勇士</a></li>
<li><a href="javascript:;">湖人</a></li>
<li><a href="javascript:;">火箭</a></li>
</ul>
</div>

其中一个解决方法是li：hover时把li的border覆盖掉div.tab的border，这样子看就是一条border，而不会出现两条border

那怎么实现呢？

从html结构可以看到ul是div里面的东西，所以它会一直在div里面，而覆盖掉border就需要把ul给弄出来，

我们可以利用position：absolute绝对定位，把ul给弄出来；

那我们就来实现吧

.tab {
width: 298px;
height: 98px;
margin: 100px;
border: 1px solid #eee;
position: relative;}

.tab ul {
height: 27px;
position: absolute;
width: 300px;//因为外面的div的宽度为：298px+两个1px的border = 300px;
left:-1px;//我们向左浮动1px的距离，这1px就是border的宽

.tab li {
float: left;
width: 58px;//见padding注释
height: 26px;
line-height: 26px;//居中显示
text-align: center;
border-bottom: 1px solid #eee;
padding: 0 1px; //这个地方非常神奇，当li:hover时需要在两边加一个border，因为300/5=60 ，如果我们写成60px的话会溢出来，写成58px后，我们用padding来填充这剩余的空间，当li:hover时再把padding 改为border
}

完成后的效果：



诶，两边怎么没有border呀，

哦，原来是我们浮动的ul的背景颜色挡住了原来div的border，那怎么才不让它挡呢？

用overflow：hidden；

为什么这个就行 呢？由于盒子模型，div真实的宽度是298px ,外面的border并不算是它的宽度，而overflow：hidden只消除div真实宽度之外的东西

完善后的代码：

.tab {
width: 298px;
height: 98px;
margin: 100px;
border: 1px solid #eee;
overflow: hidden;
position: relative;}
.tab ul {
height: 27px;
background-color: #E4E4E4;
position: absolute;
width: 300px;
left: -1px; }
.tab li {
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
overflow: hidden;
background-color: #fff;

border-bottom: 1px solid #eee;
padding: 0 1px; }

效果图：



最后的hover代码：

.tab li:hover{
padding:0;//padding 换border
border-width:0 1px;
border-style:solid;
border-color: #eee;
border-bottom: 1px solid #fff;
}

如果你有更好的方法，欢迎留言…..