jQuery做淘宝服饰案例，css

 这个就是比较简单的淘宝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()展示哪个，其他的全部隐藏起来。