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

　　

　　

?

轉載于:https://www.cnblogs.com/WeWeZhang/p/5801460.html

總結

以上是生活随笔為你收集整理的基础 - jQuery选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。