js选项卡 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .items div {
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;
            text-align: center;
            font-size: 30px;
        }
        .items .active {
            display: block;
        }
        .btns .current {
            background-color: orangered;
        }
        .btns .input {
            width: 50px;
            height: 20px;
            border: 0;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
        //    获取按钮
           var btns = $('.btns input');
           var items = $('.items div');
            btns.click(function () {
                $(this).addClass('current').siblings().removeClass('current');
                items.eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        });

    </script>


</head>
<body>
<div class="btns">
    <input type="button" value="选项卡一" class="current">
    <input type="button" value="选项卡二" >
    <input type="button" value="选项卡三" >
</div>
</br>
<div class="items">
    <div class="active">这是选项卡一里的内容</div>
    <div>这是选项卡二里的内容</div>
    <div>这是选项卡三里的内容</div>
</div>
</body>
</html>

 

posted @ 2020-03-12 14:34  卢掌柜的  阅读(206)  评论(0)    收藏  举报