tab切换

原创 一个好人 随笔 jQuery 112阅读 14 天前 举报

<style type="text/css">

box div{

            width: 200px;
            height: 200px;
            border: 1px solid green;
            display: none;
        }
        .active{
            background: orange;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $('input').click(function(){
                $('input').attr('class','');
                $(this).attr('class','active');

                $('#box div').css('display','none');
                $('#box div').eq($(this).index()).css('display','block');
            });
        });
    </script>

    <div id="box">
        <input type="button" value="按钮一" class="active" />
        <input type="button" value="按钮二" />
        <input type="button" value="按钮三" />
        <div style="display: block;">111111111111111111</div>
        <div>222222222222222222</div>
        <div>333333333333333333</div>
    </div>
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复