基础 - jQuery选项卡

<div id="box" class="box">
    <ul class="tab">
        <li class="">达文西<span>◇</span></li>
        <li class="">末梢血<span>◇</span></li>
        <li class="">华泰强<span>◇</span></li>
        <li class="">史克力</li>
    </ul>
    <div class="products">
        <div class="">
            <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1471967733065&di=79937c7d7efda0a85f821ecc8f398c53&imgtype=jpg&src=http%3A%2F%2F5.26923.com%2Fdownload%2Fpic%2F000%2F333%2Fe19c86797bb4a1bbea91389beb7d6647.jpg" alt=""></a>
        </div>
        <div class="">
            <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1471967795504&di=930c7751a83985bd8ab6a3b6be311cda&imgtype=jpg&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201208%2F04%2F20120804145729_mmHHi.jpeg" alt=""></a>
        </div>
        <div class="">
            <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1471967865305&di=4065ba9bd6aa7d2d7d0a8ceb5bcc1ee3&imgtype=jpg&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F377adab44aed2e734cbbfa998701a18b87d6fa31.jpg" alt=""></a>
        </div>
        <div class="">
            <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1471967915649&di=deef207b3bc3c356bcc688b22d57d27a&imgtype=jpg&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201208%2F04%2F20120804145755_YcevY.jpeg" alt=""></a>
        </div>
    </div>
</div>

　　

* {
    margin: 0;
    border: 0;
    padding: 0;
}
ul {
    list-style-type: none;
}

.box {
    width:1002px;
    margin: 100px auto;
    margin-bottom: 0;
}
.box .tab {
    overflow: hidden;
    width: 320px;
    height: 34px;
    border:1px solid #ddd;
    border-bottom: 0;
}
.box .tab li {
    position: relative;
    float: left;
    width: 80px;
    height: 34px;
    line-height: 34px;
    border-top:4px solid #fff;
    text-align: center;
    cursor: pointer;
}
.box .tab li.selected {
    border-color: red;
}
.box .tab li span{
    position: absolute;
    right: 0;
    top:10px;
    background: #ddd;
    width: 1px;
    height: 14px;
    overflow: hidden;
}
.box .products{
    overflow: hidden;
    border:1px solid #ddd;
}
.box .products .normal{
    float: left;
    display: none;
}
.box .products .normal.selected{
    display: block;
}
.box .products .normal a{
    display: block;
}
.box .products .normal img{
    width: 1000px;
}

　　

$(function () {
    $("#box .tab li").addClass("normal");
    $("#box .tab li").eq(0).addClass("selected");
    $("#box .products div").addClass("normal");
    $("#box .products div").eq(0).addClass("selected");

    var oBox = $("#box").get(0);
    $("#box .tab li").mouseenter(function(){
        var $This = $(this);
        oBox.index = $This.index();
        $This.addClass("selected").siblings("li").removeClass("selected");
        $("#box .products div").eq(oBox.index).addClass("selected").siblings("div").removeClass("selected");
    });
});