JQ简易tab栏

HTML部分

 <div class="title">
        <button class="bg">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </div>
    <div class="box">
        <div class="show">内容1</div>
        <div class="hide">内容2</div>
        <div class="hide">内容3</div>
    </div>

CSS部分

<style>
        .hide {
            display: none;
        }
        
        .show {
            display: block;
        }
        
        .bg {
            background-color: lightgreen;
        }
    </style>

JQ部分

 <script>
        $(document).ready(function() {
            $(".title button").click(function() {
                // 重置所有按钮和内容的状态
                $(".title button").removeClass("bg");
                $(".box div").hide();

                // 获取当前点击按钮的索引
                var index = $(this).index();

                // 根据索引显示对应的内容 
                $(this).addClass("bg");
                $(".box div").eq(index).show();
            });
        });
    </script>