JQuery tab栏切换原理

至尊鸡

已于 2023-11-30 09:28:10 修改

阅读量137

点赞数

分类专栏： JQ 文章标签： html 前端

于 2023-02-25 15:06:46 首次发布

本文链接：https://blog.csdn.net/m0_72190449/article/details/129215969

版权

JQ 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery使用/jquery.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .list{
        width: 250px;
        position: relative;
    }
    .list li{
        display: block;
        width: 50px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align: center;
    }
    .item{
        width: 250px;
        height: 100px;
        background-color: aqua;
        top: 30px;
        position: absolute;
        display: none;
    }
    .current{
        background: red;
    }
    .col{
        display: block;
    }

</style>
<script>
    $(function(){
        $(".list li").click(function(){
            $(this).addClass("current").siblings().removeClass("current")
            var index=$(this).index()
            console.log(index);
            $(".content .item").eq(index).show().siblings().hide()
        })
        
    })

</script>
<body>
    <div class="tab">
        <div class="list">
            <ul>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="content">
            <div class="item col">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </div>
    
</body>
</html>