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