简单的tab选项卡（Jquery）

LBY_XK

于 2021-06-05 18:31:04 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/LBY_XK/article/details/117602948

版权

jQuery 导航栏动态切换内容显示 DOM操作

关键词由CSDN通过智能技术生成

首先引入Jquery文件

<!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>tab</title>
    <script src="./jquery-3.5.1.min.js"></script>
    <style>
        body ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .contain {
            position: relative;
            width: 660px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        
        .contain ul {
            width: 100%;
            height: 60px;
            display: flex;
        }
        
        .contain ul li {
            flex: 1;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        
        .charge {
            background-color: #8bcee7;
            border-bottom: 2px solid red;
        }
        
        .content {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            height: 400px;
            text-align: center;
            line-height: 400px;
            font-size: 40px;
            background-color: pink;
        }
        
        .showfirst {
            z-index: 999;
        }
    </style>
</head>

<body>
    <div class="contain">
        <ul>
            <li class="charge">导航1</li>
            <li>导航2</li>
            <li>导航3</li>
            <li>导航4</li>
            <li>导航5</li>
            <li>导航6</li>
        </ul>
        <div class="content showfirst">导航1</div>
        <div class="content">导航2</div>
        <div class="content">导航3</div>
        <div class="content">导航4</div>
        <div class="content">导航5</div>
        <div class="content">导航6</div>
    </div>

    <script>
        $(function() {
            $('ul li').click(function() {
                $(this).addClass('charge').siblings('li').removeClass('charge');
                //获取点击的li索引
                var index = $(this).index();
                // 通过索引显示指定div
                $('.content').eq(index).show().siblings('.content').hide()
            })
        })
    </script>
</body>

</html>