jquery+css制作tab页面

本文介绍除了table之外的方法，用jQuery和css完成，主要z-index设置层级。

  完成效果图：

将上方的三个文字块绝对定位，定义好宽度width和高度height，用margin-left摆放好三个div块的位置，然后将最下方的div用margin-top向下移动height-1像素即可，刚好遮挡住上方div的border-bottom，给下方div设置高层级，确保能遮挡住上方内容。

html代码（div中具体内容已删除，可根据需要自行添加）：

<div class="tab" id="BasicInformation">基本信息</div>
<div class="tab" id="Qualification">资质</div>
<div class="tab" id="Contact">联系人</div>
<div id="Form1" style="clear: both">
</div>
<div id="Form2" style="clear:both;display: none">
</div>
<div id="Form3" style="clear:both;display: none">
</div>

jQuery代码：

$("#BasicInformation").click(function () {
    $("#Form2").hide();
    $("#Form3").hide();
    $("#BasicInformation").css("border-bottom","none");
    $("#Form1").show();
    $("#Qualification").css("border","1px solid rgba(228,230,235,1)");
    $("#Contact").css("border","1px solid rgba(228,230,235,1)");
});
$("#Qualification").click(function () {
    $("#Form1").hide();
    $("#Form3").hide();
    $("#BasicInformation").css("border-bottom","1px solid rgba(228,230,235,1)");
    $("#Contact").css("border","1px solid rgba(228,230,235,1)");
    $("#Form2").show();
    $("#Qualification").css("border-bottom","none");
});
$("#Contact").click(function () {
    $("#Form1").hide();
    $("#Form2").hide();
    $("#BasicInformation").css("border-bottom","1px solid rgba(228,230,235,1)");
    $("#Qualification").css("border","1px solid rgba(228,230,235,1)");
    $("#Form3").show();
    $("#Contact").css("border-bottom","none");
});

css代码：

.tab{
    font-size: 16px;
    border: 1px solid rgba(228,230,235,1);
    float: left;
    width: 100px;
    height: 34px;
    background-color: #FFFFFF;
    text-align: center;
    line-height: 34px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
}
#BasicInformation{
    border-bottom: none;
}
#Qualification{
    margin-left: 100px;
}
#Contact{
    margin-left: 200px;
}
#Form1,#Form2,#Form3{
    z-index: 0;
    margin-top: 33px;
}