简单的JS实现选项卡Tab非同级切换

思路

将所有选项按钮定义点击事件，然后在事件中先为选中的按钮添加CLASS，再将显示内容区对应的顺序元素添加选中的另一个CLASS，最后写CSS把显示内容区选中的CLASS用显示和隐藏来控制。

HTML

<div class="XulgrTab_box">
	<div class="XulgrTab_btn XulgrTab_click">选项一</div>
	<div class="XulgrTab_btn">选项二</div>
	<div class="XulgrTab_btn">选项三</div>
	<div class="XulgrTab_btn">选项四</div>
</div>
<div class="XulgrTab_content">
    <div class="XulgrTab_contents XulgrTab_content_click">
        选项一内容...
    </div>
    <div class="XulgrTab_contents">
        选项二内容...
    </div>
    <div class="XulgrTab_contents">
        选项三内容...
    </div>
    <div class="XulgrTab_contents">
        选项四内容...
    </div>
</div>

CSS

.XulgrTab_contents{
	display: none;
}
.XulgrTab_content_click{
	display: block;
}

JS

这次同样借助的jquery，所以需要引入。

<script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.js"></script>

$('.XulgrTab_btn').click(function(event) {
    $(this).addClass('XulgrTab_click');
    $(this).siblings().removeClass('XulgrTab_click');
    $('.XulgrTab_contents').eq($(this).index()).addClass('XulgrTab_content_click');
    $('.XulgrTab_contents').eq($(this).index()).siblings().removeClass('XulgrTab_content_click');
})