tab标签页的切换用jq的方式2 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.js"></script>
        <style>
            *{
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
            nav{
                width: 800px;
                height: 50px;
                background: #ddffab;
                margin: 100px auto 50px;
                padding-left: 100px;
            }
            ul li{
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                border-radius: 25px;
                float: left;
                font-size: 24px;
                color: #470a47;
                background: #acdeff;
                margin-right: 100px;
                cursor: pointer;
            }
            .tab{
                background: #ffabdd;
            }
            .content{
                width: 550px;
                height: 390px;
                border: 5px dashed  #abdeff;
                margin: 0 auto;
            }
            .content div{
                display: none;
            }
            .content .div_show{
                display: block;
            }
            .content img{
                width: 550px;
                height: 390px;
            }
        </style>
    </head>
    <body>
        <nav>
             <ul>
                 <li class="tab">加菲猫</li>
                 <li>柯基犬</li>
                 <li>垂耳兔</li>
                 <li>荷兰猪</li>
             </ul>
         </nav>
         <div class="content">
             <div class="div_show">
                 <img src="images/加菲猫.jpg">1
             </div>
             <div>
                 <img src="images/柯基犬.jpg">2
             </div>
             <div>
                 <img src="images/垂耳兔.jpg">3
             </div>
             <div>
                 <img src="images/荷兰猪.jpeg">4
             </div>
         </div>
         <script>
             $('ul li').click(function(event) {
                 $(this).addClass('tab');
                 $(this).siblings().removeClass('tab');
 
                 $('.content div').eq($(this).index()).addClass('div_show');
                 $('.content div').eq($(this).index()).siblings().removeClass('div_show');
             })
         </script>
    </body>
</html>

 

posted @ 2021-12-13 23:33  java璀璨小菜鸟  阅读(82)  评论(0)    收藏  举报