一页上的多个选项卡区域（纯Javascript）

Question

我有Codepen了。

概述：

有两个div，“code-box-1”和“code-box-2”

每个div都有三个前置元素和三个按钮。

按钮充当选项卡，通过名为openTab（）的onClick（）函数切换其相应pre元素的可见性

最后，我正在使用.click（）在页面加载时默认切换选项卡。

问题：

问题是，我不知道如何确定我的功能范围来单独处理每个菜单。

目前，在切换可见性时，单击按钮会指向正确的pre元素;但是它会关闭BOTH div中所有其他pre元素的可见性，而不是仅关闭同一“代码框”中其他div的可见性。如果有人可以就此提出建议，那将是可爱的。谢谢。

我转载了以下代码：

HTML

model => { ShelfGuid => $shelfGuid }

CSS

<div id="code-box-1">
    <div class="code-tabs">
        <button class="tablinks" onclick="openTab(event, 'disp-Apples')" id="defaultOpen-1">Apples</button>
        <button class="tablinks" onclick="openTab(event, 'disp-Oranges')">Oranges</button>
        <button class="tablinks" onclick="openTab(event, 'disp-Bananas')">Bananas</button>
        <div class="spacer"></div>
    </div>

    <pre id="disp-Apples" class="sg-tab-content">
        <p>foo-1</p>
    </pre>

    <pre id="disp-Oranges" class="sg-tab-content">
        <p>foo-2</p>
    </pre>

    <pre id="disp-Bananas" class="sg-tab-content">
        <p>foo-3</p>
    </pre>
</div>

<div id="code-box-2">
    <div class="code-tabs">
        <button class="tablinks" onclick="openTab(event, 'disp-Plums')" id="defaultOpen-2">Plums</button>
        <button class="tablinks" onclick="openTab(event, 'disp-Pears')">Pears</button>
        <button class="tablinks" onclick="openTab(event, 'disp-Grapes')">Grapes</button>
        <div class="spacer"></div>
    </div>

    <pre id="disp-Plums" class="sg-tab-content">
        <p>foo-4</p>
    </pre>

    <pre id="disp-Pears" class="sg-tab-content">
        <p>foo-5</p>
    </pre>

    <pre id="disp-Grapes" class="sg-tab-content">
        <p>foo-6</p>
    </pre>
</div>

的Javascript

pre {
background-color: #f2f2f2;
border: 1px solid #cccccc;
padding: 0 0 0 20px;
margin-top: 0;
margin-bottom: 20px;
font-family: Consolas, Monaco, monospace;
font-size: 92%;
max-width: 100%;
height: 200px;
box-sizing: border-box;
position: relative;
z-index: 1;
}

div.code-tabs {
display: -webkit-flex;
display: flex;
width: 100%;
}

div.code-tabs button {
outline: none;
border: 1px solid #ccc;
background-color: #f2f2f2;
margin-right: 4px;
margin-bottom: -1px;
color: #9e9e9e;
font-family: Consolas, Monaco, monospace;
font-size: .875em; /*14px*/
height: 25px;
flex: 1;
z-index: 2;
}

div.code-tabs button.sg-current {
border-bottom: none !important;
}

.sg-tab-content {
display: none;
}

div.spacer {
height: 24px;
margin-bottom: -1px;
flex: 3;
}

Answer 1

有很多方法可以实现这一目标。现在最简单的方法就是传递盒子的ID：

HTML

<div id="code-box-1">
    <div class="code-tabs">
        <button class="tablinks" onclick="openTab(event, 'disp-Apples','code-box-1')" id="defaultOpen-1">Apples</button>
        <button class="tablinks" onclick="openTab(event, 'disp-Oranges','code-box-1')">Oranges</button>
        <button class="tablinks" onclick="openTab(event, 'disp-Bananas','code-box-1')">Bananas</button>
        <div class="spacer"></div>
    </div>

    <pre id="disp-Apples" class="sg-tab-content">
        <p>foo-1</p>
    </pre>

    <pre id="disp-Oranges" class="sg-tab-content">
        <p>foo-2</p>
    </pre>

    <pre id="disp-Bananas" class="sg-tab-content">
        <p>foo-3</p>
    </pre>
</div>

<div id="code-box-2">
    <div class="code-tabs">
        <button class="tablinks" onclick="openTab(event, 'disp-Plums','code-box-2')" id="defaultOpen-2">Plums</button>
        <button class="tablinks" onclick="openTab(event, 'disp-Pears','code-box-2')">Pears</button>
        <button class="tablinks" onclick="openTab(event, 'disp-Grapes','code-box-2')">Grapes</button>
        <div class="spacer"></div>
    </div>

    <pre id="disp-Plums" class="sg-tab-content">
        <p>foo-4</p>
    </pre>

    <pre id="disp-Pears" class="sg-tab-content">
        <p>foo-5</p>
    </pre>

    <pre id="disp-Grapes" class="sg-tab-content">
        <p>foo-6</p>
    </pre>
</div>

JS

document.getElementById("defaultOpen-1").click();

function openTab(evt, tabName, boxName) {    
    var i, tabcontent, tablinks;

    var box = document.getElementById(boxName)

    tabcontent = box.getElementsByClassName("sg-tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = box.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" sg-current", "");
    }

    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " sg-current";
}