这个就是比较简单的淘宝tab栏切换的案例
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="./tbimges/女靴.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/雪地靴.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/冬裙.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/呢大衣.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/毛衣.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/棉服.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/女裤.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/羽绒服.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/牛仔裤.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/女包.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/男包.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/登山鞋.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/皮带.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/围巾.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/皮衣.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/男毛衣.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/男棉服.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./tbimges/男靴.jpg" alt=""></a>
</div>
</div>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男鞋</a></li>
</ul>
</div>
<script>
$(function() {
$('#left li').mouseover(function() {
var index = $(this).index();
$('#content div').eq(index).show().siblings().hide();
})
$('#right li').mouseover(function() {
var index = $(this).index() + $('#left li').length;
console.log(index);
$('#content div').eq(index).show().siblings().hide();
})
})
</script>
这个案例与tab切换栏非常像
思路:思路很简单就是获取当前点击或者鼠标经过小li的索引,然后当前获得了哪个索引就show()展示哪个,其他的全部隐藏起来。