jquery实现Tab栏切换 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- jquery引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        .tab-panels ul {
            margin: 0;
            padding: 0;
        }

        .tab-panels ul li {
            list-style: none;
            display: inline-block;
            background: #cc6677;
            padding: 3px 10px;
            border-radius: 10px 10px 0 0;
            color: #fff;
            font-weight: 200;
            cursor: pointer;
        }

        .tab-panels ul li:hover {
            background: #666;
        }

        .tab-panels ul li.active1 {
            background: #666;
        }

        .tab-panels .panel {
            display: none;
            background: #c9c9c9;
            padding: 30px;
            border-radius: 0 0 10px 10px;
        }

        .tab-panels div.active2 {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tab-panels">
        <ul class="tabs">
            <li class="active1">panel1</li>
            <li>panel2</li>
            <li>panel3</li>
            <li>panel4</li>
        </ul>
        <div id="panel1" class="panel active2">
            content1 <br>
            content1 <br>
            content1 <br>
            content1 <br>
        </div>
        <div id="panel2" class="panel">
            content2 <br>
            content2 <br>
            content2 <br>
            content2 <br>
        </div>
        <div id="panel3" class="panel">
            content3 <br>
            content3 <br>
            content3 <br>
            content3 <br>
        </div>
        <div id="panel4" class="panel">
            content4 <br>
            content4 <br>
            content4 <br>
            content4 <br>
        </div>
    </div>
    <script>
        $(function () {
            $('li').click(function (event) {
                $('li').removeClass('active1');
                $('.tab-panels  div').removeClass('active2');
                $(this).addClass('active1');
                $('.tab-panels  div').eq($(this).index()).addClass('active2');
            })
        })
    </script>
</body>

</html>

　　

posted @ 2020-03-18 21:51  ayong6  阅读(269)  评论(0)    收藏  举报