在页面刷新时保持第 1 节处于活动状态（Javascript + css）

Question

我有 3 个按钮和 3 个隐藏部分： enter image description here

一旦我点击一个按钮，这些部分就会从隐藏变为显示： enter image description here

但我需要在页面刷新时将第 1 部分显示为默认显示。

脚本 iv 现在得到：

<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1");
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2");
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3");
};

function toggleDivs(s){
//reset
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
//show
document.getElementById(s).classList.add("shown");
}
</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
</style>

Answer 1

您可以在页面加载后将该部分设置为“活动”。您也可以通过 JS 或 CSS 来实现。

<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.onclick = function(event){
event.preventDefault();
btn1.classList.add("active-btn"); // add active class
btn2.classList.remove("active-btn"); // remove from other btn
btn3.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect1");
};
btn2.onclick = function(event){
event.preventDefault();
btn2.classList.add("active-btn");// add active class
btn1.classList.remove("active-btn"); // remove from other btn
btn3.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect2");
};
btn3.onclick = function(event){
event.preventDefault();
btn3.classList.add("active-btn"); // add active class
btn1.classList.remove("active-btn"); // remove from other btn
btn2.classList.remove("active-btn"); // remove from other btn
toggleDivs("sect3");
};

function toggleDivs(s){
//reset
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
//show
document.getElementById(s).classList.add("shown");
}

 
// Once everything is ready
toggleDivs("sect1"); // call it with default activated session
// if you want to load data from API then wait before calling this function. 


</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
// add class for active button
.active-btn{
   color:red;
   background: white;
}
</style>