Html Tab选项卡，类似与京东图书里面的选项卡。

HTML实例代码

          图书详情      图书系列                      图书名称：生物信息学课程导引-生物信息学研究生暑期学校讲义        图书ISBN：9787302323594        图书页数：396 (页)        图书版次：1        图书语言：72        图书库存：1 (本)        图书借出次数：0 (次)                                       DNA和蛋白质序列数                           生物信息学分析实践                           微生物实验实训                           新一代基因组测序-通

CSS代码

.Info_Main_Center {
    width:800px;
    border:1px solid #dddddd;
    margin-top:30px;
    float:left;
    border-top:2px solid #aaaaaa;
}
.Info_Main_Center_Tab {
    width: 100%;
    height: 30px;
    background-color: #f7f7f7;
    border-bottom:1px solid #dddddd;
    float:left;
}
    .Info_Main_Center_Tab > li {
        list-style:none;
        float:left;
        margin-left:-1px;
    }
        .Info_Main_Center_Tab > li > a {
            font: 14px "微软雅黑", Arial, Helvetica, sans-serif;
            color:#333;
            height:30px;
            line-height:30px;
            float:left;
            padding:0 20px 0 20px;
        }
.CurrentTab {
    height:34px !important;
    margin-top:-5px;
    background-color:#fff;
    border-top:2px solid #6a77b6;
    border-left:1px solid #dddddd;
    border-right:1px solid #dddddd;
    color:#6a77b6 !important;
}
.Info_Main_Center_TabContent {
    width:100%;
    display:none;
}
.Info_Main_Center_TabContent1 {
    display:block;
}
.BookInformations {
    margin:0;
    padding:0;
}
    .BookInformations > li {
        font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
        color:#000000;
        line-height:35px;
        padding-left:10px;
        float:left;
        width:32%;
        overflow:hidden;
    }
        .BookInformations > li > span {
            color:#808080;
            font: 12px "微软雅黑", Arial, Helvetica, sans-serif;
        }
.Info_Main_Center_TabContent2 > ul {
    margin:0;
    padding:0;
}
    .Info_Main_Center_TabContent2 > ul > li {
       list-style:none;line-height:30px;margin-left:20px;margin-top:10px;
       float:left;
       border:1px solid #fff;
    }
        .Info_Main_Center_TabContent2 > ul > li:hover {
            border:1px solid #ff4400;
        }
        .Info_Main_Center_TabContent2 > ul > li >a> img {
            width:120px;
            height:120px;
            border:0px solid #fff;
        }
        .Info_Main_Center_TabContent2 > ul > li > p {
            font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
            text-align:center;
            margin-top:-15px;
            line-height:30px;
        }
#Info_Main_Center_Directory {
    padding:10px 0 0 10px;
    font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
}

Jq代码

$(function () {
        $(".TabItem").click(function () {
            $(".TabItem").removeClass("CurrentTab");
            $(this).addClass("CurrentTab");
            $(".Info_Main_Center_TabContent").css("display", "none");
            var item = $(this).attr("id");
            $("."   item).css("display", "block");
        });
    });