jQuery商品栏小案例

html:

<div class="wrap">
<ul class="listLeft">
<li>女靴</li>
<li>雪地靴</li>
<li>冬裙</li>
<li>呢大衣</li>
<li>毛衣</li>
<li>棉服</li>
<li>女裤</li>
<li>羽绒服</li>
<li class="noBorder">牛仔裤</li>
</ul>
<ul class="pic">
<li><img src="images/女靴.jpg"/></li>
<li><img src="images/雪地靴.jpg"/></li>
<li class="current"><img src="images/冬裙.jpg"/></li>
<li><img src="images/呢大衣.jpg"/></li>
<li><img src="images/毛衣.jpg"/></li>
<li><img src="images/棉服.jpg"/></li>
<li><img src="images/女裤.jpg"/></li>
<li><img src="images/羽绒服.jpg"/></li>
<li><img src="images/牛仔裤.jpg"/></li>
<li><img src="images/女包.jpg"/></li>
<li><img src="images/男包.jpg"/></li>
<li><img src="images/登山鞋.jpg"/></li>
<li><img src="images/皮带.jpg"/></li>
<li><img src="images/围巾.jpg"/></li>
<li><img src="images/皮衣.jpg"/></li>
<li><img src="images/男毛衣.jpg"/></li>
<li><img src="images/男棉服.jpg"/></li>
<li><img src="images/男靴.jpg"/></li>
</ul>
<ul class="listRight">
<li>女包</li>
<li>男包</li>
<li>登山鞋</li>
<li>皮带</li>
<li>围巾</li>
<li>皮衣</li>
<li>男毛衣</li>
<li>男棉服</li>
<li class="noBorder">男靴</li>
</ul>

</div>

css样式：

.wrap {
margin: 100px auto;
width: 300px;
border: 1px solid #EDAFAB;
overflow: hidden;
}

.wrap .listLeft {
float: left;
}
.wrap .listLeft li {
width: 49px;
font-size: 12px;
text-align: center;
line-height: 28px;
border-right: 1px solid #EDAFAB;
border-bottom: 1px solid #EDAFAB;
cursor: pointer;
}

.wrap .listRight {
float: right;
}
.wrap .listRight li {
width: 49px;
font-size: 12px;
text-align: center;
line-height: 28px;
border-left: 1px solid #EDAFAB;
border-bottom: 1px solid #EDAFAB;
cursor: pointer;
}
.wrap li.noBorder {
border-bottom: none;
}

.wrap .pic {
float: left;
padding-top: 3px;
}
.wrap .pic li {
display: none;
}
.wrap .pic li.current {
display: block;

}

jQuery代码：

$(function() {
          var liLength = $(".wrap .listLeft li").length;
          $(".wrap .listLeft li").mouseenter(function() {
          $(this).css("background-color","#D9201D");
          $(this).parent().next().children("li").eq($(this).index()).addClass("current")
          .siblings().removeClass("current");
          });
          $(".wrap .listRight li").mouseenter(function() {
          $(this).css("background-color","#D9201D");
          $(this).parent().prev().children("li").eq($(this).index()+liLength).addClass("current")
          .siblings().removeClass("current");
          });
          //鼠标移开，背景恢复白色
          $(".wrap .listLeft li,.wrap .listRight li").mouseout(function() {
          $(this).css("background-color","#fff");
          });
         });