tab栏切换

最新推荐文章于 2024-05-17 21:52:12 发布

温柔女魔头

最新推荐文章于 2024-05-17 21:52:12 发布

阅读量108

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_19880197/article/details/86648617

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

HTML

 <nav>
        <ul>
            <li class="tab">衣服</li>
            <li>一</li>
            <li>二服</li>
            <li>三服</li>
        </ul>
    </nav>
<div class="content">
    <div class="div_show">
        <img src="images/yifu.jpg" alt="">
    </div>
    <div>
        <img src="images/bao.jpg" alt="">
    </div>
    <div>
        <img src="images/bao.jpg" alt="">
    </div>
    <div>
        <img src="images/yifu.jpg" alt="">
    </div>
</div>

CSS

*{
    padding: 0;
    margin: 0;

}
ul{
    list-style: none;
}
nav{
    width: 800px;
    height: 50px;
    background: #ddffab;
    margin: 100px auto 0 ;
    padding-left: 100px;
}
ul li{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 25px;
    float: left;
    font-size: 24px;
    color: #000;
    margin-right: 100px;
    cursor: pointer;
}
.tab{
    background: red;
}
.content{
    width: 550px;
    height: 390px;
    border: 5px solid pink;
    margin: 0 auto;
}
.content div{
    display: none;
}
.content .div_show{
    display: block;
}
.content img{
    width: 550px;
    height: 390px;
}

jquery

<script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
            $("ul li").mouseenter(function () {
                $(this).addClass("tab").siblings().removeClass("tab");
                var idx=$(this).index();
                $(".content div").eq(idx).addClass("div_show").siblings().removeClass("div_show");
            });
        });
    </script>