Thiết kế website giá rẻ

Question

So i’m making a little game, and i’m trying to make subtabs. But the problem is when i click the open subtab button, it hides the entire subtab. Here is my HTMl code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A game about a person trying to analyze all chess positions">
        <link rel="stylesheet" href="./css/main.css">
        <link rel="stylesheet" href="./css/pc-upgrade.css">
        <link rel="stylesheet" href="./css/tab.css">
    </head>
    <body>
        <div class="tab">
            <button class="tablinks" onclick="openTab(event, 'pc')">PC</button>
            <button class="tablinks" onclick="openTab(event, 'upgrades')">Upgrades</button>
            <button class="tablinks" onclick="openTab(event, 'options')">Options</button>
        </div>
        <div id="pc" class="tabcontent">
            <div class="subtab">
                <button class="tablinks" onclick="openTab(event, 'cpu')">CPU</button>
            </div>
            <div id="cpu" class="subtabcontent">
                <div class="stat">
                    <div id="positions"></div>
                    <div id="pps"></div>
                </div>
                <div class="cpustats">
                    <div id="cpuCount"></div>
                    <div id="mult"></div>
                    <button id="buycpu"></button>
                </div>
                <div class="pc-upgrade">
                    <div id="cpu-upgrade">
                        <div id="boosterCount"></div>
                        <button class="disabled" id="booster"></button>
                    </div>
                </div>
            </div>
        <div id="upgrades" class="tabcontent">
            <div id="u1">PLACEHOLDER</div>
        </div>
        <div id="options" class="tabcontent">
           <button id="savegame">Save your game</button>
           <button id="loadgame">Load your game</button>
        </div>
        <script src="js/pc-upgrade.js"></script>
        <script src="js/main.js"></script>
        <script src="js/tabs.js"></script>
        <script src="js/save.js"></script>
    </body>
</html>

The JS code to open tabs:

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

    tabcontent = document.getElementsByClassName("tabcontent");
    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(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }
document.addEventListener('DOMContentLoaded', function() {
    openTab(event, 'pc');
    openSubTab(event, 'cpu');
});

function openSubTab(evt, subTabName) {
  var i, subtabcontent, subtablinks;

  subtabcontent = document.getElementsByClassName("subtabcontent");
  for (i = 0; i < subtabcontent.length; i++) {
      subtabcontent[i].style.display = "none";
  }

  subtablinks = document.getElementsByClassName("subtablinks");
  for (i = 0; i < subtablinks.length; i++) {
      subtablinks[i].className = subtablinks[i].className.replace(" active", "");
  }

  document.getElementById(subTabName).style.display = "block";
      evt.currentTarget.className += " active";
}

And the CSS code to decorate the tabs:

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
}
.tab button:hover {
    background-color: #ddd;
}
.tab button.active {
    background-color: #ccc;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

.subtab {
    overflow: hidden;
    border: 1px solid #ccc;
}
.subtab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}
.subtab button:hover {
    background-color: #ddd;
}
.subtab button.active {
    background-color: #ccc;
}
.subtabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

I’ve researched for hours but I can’t find nothing useful. I’m expecting it will open the “CPU” subtab and i don’t know what to write more.
Any help appreciated!

Thiết kế website giá rẻ

Danh mục

Nothing shows when click the open subtab button