Tab选项卡切换

标签：

框架：

<div id="notice">
<div id="noticeTitle">
<ul>
<li ><a href="#">热点</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">娱乐</a></li>
<li class="select"><a href="#">游戏</a></li>
</ul>
</div>
<div id="noticeCon">
<div class="noticeContent" style="display:block"><ul></ul></div>
<div class="noticeContent" style="display:none"><ul></ul></div>
<div class="noticeContent" style="display:none"><ul></ul></div>
<div class="noticeContent" style="display:none"><ul></ul></div>
<div class="noticeContent" style="display:none"><ul></ul></div>
</div>
</div>

CSS要点：

noticeTitle为relative，noticeTitle下的ul为absolute，noticeTitle下的ul需要left:-1px，用来使首个选项卡的左border与noticeTitle的左border重合遮盖

select的选项卡取消左右padding，增加左右border

noticeTitle的border宽+noticeTitle的宽度===每个li的宽度+border宽度+左右padding(如noticeTitle的宽度398+1px的border*2=400，noticeTitle下的ul为78宽度*5+2*5=400，因为noticeTitle的左border为1px，所以noticeTitle下的ul需要left:-1px使得两者400px重合)

noticeTitle的height=30px，noticeTitle下的ul下的li的height为29，border-bottom为1，li中的line-height为29

Tab选项卡切换

标签：

原文地址：http://www.cnblogs.com/nimiair/p/5131405.html