javascript - HTML- 内容未在选项卡中正确显示

Question

我是前端开发的新手，在使用 HTML 中的选项卡时遇到了困难。我正在尝试在选项卡中显示内容，并且我能够以某种方式做到这一点，但它仅在按下任何选项卡按钮时才有效。整个内容在页面加载时显示，最终在单击选项卡按钮时显示，它工作正常。

有人可以纠正我吗？

https://jsfiddle.net/pndmyaf7/

CSS

    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

.tab-content>.tab-pane {
  height: 1px;
  overflow: hidden;
  display: block;
 visibility: hidden;
}
.tab-content>.active {
  height: auto;
  overflow: auto;
  visibility: visible;
}

HTML

<fieldset class="tab" style="margin-top: 150px ";>


<legend align="center">Exposure Breakdown</legend>
<button class="tablinks" onclick="openTab(event, 'exposure_by_asset_type')">Asset Class</button>
<button class="tablinks" onclick="openTab(event, 'exposure_by_leh_sector')">LEH Sector</button>
<button class="tablinks" onclick="openTab(event, 'exposure_by_gics_sector')">GICS Sector</button>
</fieldset>

<div id="exposure_by_asset_type" class="tab-content">
    <h3>Test0</h3>
</div>

<div id="exposure_by_leh_sector" class="tab-content">
            <h3>Tes1</h3>
</div>

<div id="exposure_by_gics_sector" class="tab-content">
            <h3>Test2</h3>
</div>

JS

function openTab(evt, chart_id) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(chart_id).style.display = "block";
    evt.cur`enter code here`rentTarget.className += " active";
}

Answer 1

最初将内容的可见性设置为无。您可以简单地将其添加到您的 css 文件中:

.tab-content {
  display: none;
}