1 <script> 2 ?$(function(){ 3 ???$(‘.tab li‘).mouseenter(function(){ 4 ????????var $this=$(this); 5 ????????var index=$this.index(); 6 ????????$this.addClass(‘active‘).siblings().removeClass(‘active‘); 7 ????????$(‘.products ?div‘).eq(index).addClass(‘selected‘).siblings().removeClass(‘selected‘); 8 ???}) 9 ?})10 </script>html代码：
<div class="wrapper"> ???????<ul class="tab"> ???????????<li class="tab-item active">国际大牌<span>◆</span></li> ???????????<li class="tab-item">国妆名牌<span>◆</span></li> ???????????<li class="tab-item">清洁用品<span>◆</span></li> ???????????<li class="tab-item">男士精品</li> ???????</ul> ???????<div class="products"> ???????????<div class="main selected"> ???????????????<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a> ???????????</div> ???????????<div class="main"> ???????????????<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a> ???????????</div> ???????????<div class="main"> ???????????????<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a> ???????????</div> ???????????<div class="main"> ???????????????<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a> ???????????</div> ???????</div> ???</div>
css代码：
??*{ ???????????margin: 0; ???????????padding: 0;} ???????.wrapper{ ???????????width: 1000px; ???????????height: 475px; ???????????margin: 0 auto; ???????????margin-top: 100px; ???????} ???????.tab{ ???????????border:1px solid #ddd; ???????????border-bottom: 0; ???????????height: 36px; ???????????width: 320px; ???????} ???????.tab li{ ???????????list-style: none; ???????????float: left; ???????????width: 80px; ???????????height: 34px; ???????????line-height: 34px; ???????????text-align: center; ???????????cursor:pointer; ???????????border-top: 4px solid #fff; ???????????position: relative; ???????} ???????.tab span{ ???????????position: absolute; ???????????right: 0; ???????????top: 10px; ???????????background: #ddd; ???????????width: 1px; ???????????height: 14px; ???????????overflow: hidden; ???????} ???????.products{ ???????????width: 1002px; ???????????border:1px solid #ddd; ???????????height: 476px; ???????} ???????.products ?.main{ ???????????float: left; ???????????display: none; ???????} ???????.products ?.main.selected{ ???????????display: block; ???????} ???????.tab li.active{ ???????????border-color:red; ???????????border-bottom: 0; ???????}jQuery图片tab栏切换
原文地址：https://www.cnblogs.com/yangguoe/p/8167739.html