在网页HTML/Javascript中的两个菜单选项卡之间切换

我想在显示不同图形的两个选项卡之间切换。当前页面打开时第一个选项卡打开，您可以选择第二个选项卡。但不能重新打开第一个选项卡。我希望能够在两个选项卡之间自由切换

我正在尝试修复一些我没有构建的东西，并且对它的工作原理了解非常有限

HTML代码是：

                <div class="tabsmenuwaste" id="tabsldelay" style="margin-left: auto; margin-right:auto; Margin-top: -50px;">


                    <div id="tab1waste" class="tabheaderwaste" onClick="JavaScript:selectTabwaste(1);">
                        <h4 id="tab1headerwaste" class="active">Daily Summary</h4>
                    </div>

                    <div id="tab2waste" class="tabheaderwaste" onClick="JavaScript:selectTabwaste(2);">
                        <h4 id="tab2headewaster">How's my Business</h4>
                    </div>


                </div>

每日综合
我的生意怎么样

Javascript代码是：

function selectTabwaste(tabIndex) {

        //Hide All Tabs
        var index = 0;
        var lb = document.querySelectorAll("div.tableauPlaceholderhub").length;


        for (; index < lb; index++) {

            document.querySelectorAll("div.tableauPlaceholderhub")[index].style.display = "none";

            document.querySelectorAll("div.tableauPlaceholderhmb")[index].style.display = "none";

        }

        if (tabIndex == 2) {
            document.getElementById("tab1waste").getElementsByTagName("h4")[0].className = "tabheaderwaste";
            document.getElementById("tab2waste").getElementsByTagName("h4")[0].className = "tabheaderwaste active";

        } else if (tabIndex == 1) {

          document.getElementById("tab1waste").getElementsByTagName("h4")[0].className = "tabheaderwaste active";
            document.getElementById("tab2waste").getElementsByTagName("h4")[0].className = "tabheaderwaste";
        }

        var index = 0;
        var l = document.querySelectorAll("div.tab" + tabIndex + "Contentwaste").length;

        for (; index < l; index++) {

            document.querySelectorAll("div.tab" + tabIndex + "Contentwaste")[index].style.display = "block";

        }

        //Show the Selected Tab
    }

函数选择TabWaste（tabIndex）{
//隐藏所有选项卡
var指数=0；
var lb=document.queryselectoral（“div.tableauPlaceholderhub”）.length；
对于（；索引

我希望能够在两个选项卡之间自由切换。

使用此代码

“严格使用”；
let tab=document.getElementsByClassName（'tab'），
tabContent=document.getElementsByClassName（'tab-item-content'），
选择器=document.querySelector（'.selector'），
tabs=document.querySelector（'.tabs'）；
函数hideTabsContent（a）{
for（设i=a；i

@导入url（'https://fonts.googleapis.com/css?family=Ubuntu');
*{
保证金：0；
填充：0；
}
身体{
字体系列：“Ubuntu”，无衬线；
背景#6395ed；
填充顶部：40px；
}
#水平标签{
最大宽度：600px；
显示：块；
保证金：0自动；
}
.标签{
显示：内联flex；
调整内容：灵活启动；
对齐项目：居中；
列表样式：无；
背景色：#bfd3f8；
颜色：#fff；
字体大小：400；
边界半径：7px；
宽度：内容框；
位置：相对位置；
}
.标签{
显示：块；
填充：11px 20px；
位置：相对位置；
z指数：99999；
}
.选项卡：悬停{
光标：指针；
}
.选择器{
显示：内联块；
位置：绝对位置；
左：0；
排名：0；
高度：40px；
z指数：99999；
边界半径：7px；
过渡：所有500毫秒立方贝塞尔（0.080，-0.195,0.140,0.970）；
背景#92b4f2；
}
.选择器：之后{
内容：''；
位置：绝对位置；
z指数：-1；
左：计算（50%-10px）；
底部：-10px；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：10px 10px 0 10px；
边框颜色：#92b4f2透明；
}
.tab内容.tab项目内容{
背景：#ffffff；
边界半径：10px；
框大小：边框框；
显示：无；
}
.tab内容.tab-item-content.active{
填充：20px；
高度：200px；
显示：块；
}
li.tab.隐藏选项卡名称{
字号：0；
可见性：隐藏；
不透明度：0；
过渡：可见性0，不透明度0.5线性；
}
li.tab.active-item.hidden选项卡名称{
显示：内联；
能见度：可见；
不透明度：1；
字体大小：继承；
}

表1
2
隐藏名称3
4[特殊长名称]

//部分内容（1）
//部分内容（2）
//第三张幻灯片
//Lorem ipsum dolor sit amet，奉献精英。身体上的Accumamus corporis应该是一个有价值的人，因为他是一个有价值的人。

我需要调查一下。不知道如何应用它来修改我现有的代码。不确定哪些是从中提取的关键部分。