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;        }

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