Javascript 单击按钮2时禁用按钮1部分

在Elementor页面生成器中具有多个与这些按钮关联的按钮和部分

我试图实现的是，当页面加载时，我们只能看到按钮，当有人单击按钮时，部分将切换

我已经设法做到了，但当点击第二个按钮时，按钮1部分应该隐藏，按钮2部分应该显示

这是你的电话号码

jQuery（文档）.ready（函数（$）{
var hbtn=$（“.coursesBtn”）；
var hcon=$（“.CourseSession”）；
hcon.hide（）；
hbtn.点击（功能（e）{
var指数=hbtn.指数（本）
$（hcon）.eq（索引）.slideToggle（“慢”）；
e、 预防默认值（）；
});
});
jQuery（文档）.ready（函数（$）{
var hbtn=$（“.videosBtn”）；
var hcon=$（“.videosSection”）；
hcon.hide（）；
hbtn.点击（功能（e）{
var指数=hbtn.指数（本）
$（hcon）.eq（索引）.slideToggle（“慢”）；
e、 预防默认值（）；
});
});例如，您可以对按钮使用
onclick

<button class="btn1" onclick="f1()">BUTTON1</button>

按钮1

并添加函数以切换到
f1（）
下面是一个快速示例，其想法是先隐藏其他部分，然后显示要显示的部分


$（文档）.ready（函数（$）{
$（'.btn1'）。单击（函数（）{
$（'.section'）.hide（）；
$（'.section1'）.show（）；
})
$（'.btn2'）。单击（函数（）{
$（'.section'）.hide（）；
$（'.section2'）.show（）；
})
$（'.btn3'）。单击（函数（）{
$（'.section'）.hide（）；
$（'.section3'）.show（）；
})
})
部分{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
.第2节{
背景颜色：浅绿色；
}
.第3节{
背景颜色：橙色；
}
按钮1
按钮2
按钮3
这是第一节。
这是第二节。
这是第三部分。
为每个按钮（
.btn
）和节（
.section
）添加一个新类，并在下面的代码中使用它们。您可以有任意多个按钮和部分，下面的代码无需任何修改即可工作：

var hbtn = $(".btn");
var hcon = $(".section");  
hcon.hide();
hbtn.click(function(e) {
    var index = hbtn.index(this); 
    hcon.hide() //OR hcon.filter(':visible').slideToggle("slow")
    .eq(index).slideToggle("slow");
});

演示


$（文档）.ready（函数（$）{
var hbtn=$（“.btn”）；
var hcon=$（“.section”）；
hcon.hide（）；
hbtn.点击（功能（e）{
var指数=hbtn.指数（本）；
hcon.hide（）//或hcon.filter（':visible'）.slideToggle（“慢”）
.eq（索引）。滑动切换（“慢”）；
});
});
。第1节{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}
.第2节{
宽度：100%；
填充：50px0；
文本对齐：居中；
背景颜色：浅蓝色；
边缘顶部：20px；
}

按钮1
按钮2
这是第一节。
这是第二节。
你能添加一个基本的HTML来模拟场景吗？这里是我工作的w3学校链接，请查看下面的答案