Javascript 使用两个按钮在两个div之间切换

我需要用两个不同的按钮在同一部分的两个div之间切换，每个div连接到一个按钮

示例：（我需要在“btn1”处于活动状态时，显示“div1”。当我单击“btn2”时，显示“div2”而不是“div1”，反之亦然！帮助

*{
颜色：#fff；
}
.btn{
宽度：100px；
高度：50px；
背景：rgba（0,0,0,0.4）；
显示：内联块；
}
.btn活动{
背景：rgba（0,0,0,1）；
}
.分区{
宽度：200px；
高度：100px；
背景：红色；
显示：无；
}
.分区激活{
显示：块；
}

按钮1
按钮2
第一组
第2组

我建议首先将所有按钮和div分组为两个集合。从这里开始，我将向每个按钮添加一个事件侦听器。此侦听器将首先删除所有活动的类，然后将活动的类重新应用到相应的div

这可以在以下示例中看到：

const buttons=document.getElementsByClassName（'btn'）；
const divs=document.getElementsByClassName（'div'）；
for（设i=0；i

*{
颜色：#fff；
}
.btn{
宽度：100px；
高度：50px；
背景：rgba（0,0,0,0.4）；
显示：内联块；
}
.btn活动{
背景：rgba（0,0,0,1）；
}
.分区{
宽度：200px；
高度：100px；
背景：红色；
显示：无；
}
.分区激活{
显示：块；
}

按钮1
按钮2
第一组
第2组

尝试以下方法：

<div>
    <div class="btn btn-active" id="btn1">
        BUTTON 1
    </div>
    <div class="btn" id="btn2">
        BUTTON 2
    </div>
</div>
<div>
    <div class="div " id="div1">
        DIV 1
    </div>
    <div class="div div-active" id="div2">
        DIV 2   
    </div>
</div>

<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    //
    btn1.addEventListener("click", function(){
        btn1.classList.remove("btn-active");
        btn2.classList.add("btn-active");            
        div2.classList.remove("div-active");
        div1.classList.add("div-active");
    });
    //
    btn2.addEventListener("click", function(){
        btn2.classList.remove("btn-active");
        btn1.classList.add("btn-active");            
        div1.classList.remove("div-active");
        div2.classList.add("div-active");            
    });        
</script>

按钮1
按钮2
第一组
第2组
var btn1=document.getElementById（“btn1”）；
var btn2=document.getElementById（“btn2”）；
var div1=document.getElementById（“div1”）；
var div2=document.getElementById（“div2”）；
//
btn1.addEventListener（“单击”，函数（）{
btn1.classList.remove（“btn活动”）；
btn2.classList.add（“btn活动”）；
div2.classList.remove（“div活动”）；
div1.classList.add（“div活动”）；
});
//
btn2.addEventListener（“单击”，函数（）{
btn2.classList.remove（“btn活动”）；
btn1.classList.add（“btn活动”）；
div1.classList.remove（“div活动”）；
div2.classList.add（“div活动”）；
});        

您试图解决什么问题？您没有包含任何javascript。