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>Leather</li> </ul><li class="noBorder">Men's Boots</li><li>Men's Cotton Clothes</li>
<li>Men's Sweater</li>
</div>
css style:
.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 code:
$(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");
});
});