jQuery基础知识（二）【top切换】

body主体内容：

<div class="wrap">

    <ul id="left">

        <li class="ont"><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="images/ex6-6-2.jpg" alt=""></a></div>

        <div><a href="#"><img src="images/ex6-6-3.jpg" alt=""></a></div>

        <div><a href="#"><img src="images/ex6-6-4.jpg" alt=""></a></div>

        <div><a href="#"><img src="images/ex6-6-5.jpg" alt=""></a></div>

        <div><a href="#"><img src="images/ex6-6-6.jpg" alt=""></a></div>

    </div>

</div>

CSS样式：

   *{

            margin: 0;

            padding: 0;

            list-style: none;

            text-decoration: none;

        }

        img{

            width: 200px;

            height: 250px;

        }

        .wrap{

            width: 260px;

            height: 250px;

            border: 1px solid black;

            box-sizing: border-box;

            margin: 0px auto;

            overflow: hidden;

        }

        #left{

            float: left;

            margin-right: 8px;

        }

    ul>li{

            height: 50px;

            line-height: 50px;

            border: 1px solid black;

            box-sizing: border-box;

            border-left: none;

            border-top: none;

        }

       li:last-child{

        border-bottom: none;

       }

        #content{

            float: left;

        }

        .ont{

            background-color: aqua;

            color: blueviolet;

        }

引入    <script src="jquery.min.js"></script>

script部分

<script>

    $(function(){

        // (1)普通

        // $("#left li").click(function(){

        // //设置当前鼠标滑过的背景颜色

        //  $(this).addClass('ont');

        //  //其他按钮的背景颜色为空

        //  $(this).siblings('#left li').removeClass('ont');

        //  //获取索引号

        //  var ad=$(this).index();

        //  //当前鼠标滑过显示的图片

        //  $("#content div").eq(ad).show();

        // //其他图片隐藏

        //  $("#content div").eq(ad).siblings().hide();

        // })

        // (2)链式编程

        $("#left li").click(function(){

            //设置当前鼠标点击过的背景颜色，其他按钮的背景颜色为空

            $(this).addClass('ont').siblings().removeClass('ont');

           //获取索引号

            var ad=$(this).index();

            //当前鼠标点击显示的图片，其他图片隐藏

            $("#content div").eq(ad).show().siblings().hide();

           

        })

    })

效果图：