单击打开子选项卡按钮时没有任何显示

问题描述 投票：0回答：1

所以我正在制作一个小游戏，并且我正在尝试制作子选项卡。但问题是当我单击“打开子选项卡”按钮时，它会隐藏整个子选项卡。这是我的 HTML 代码：

<!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>

打开标签页的JS代码：

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";
}

以及装饰选项卡的 CSS 代码：

.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;
}

我研究了几个小时，但找不到任何有用的东西。我期待它会打开“CPU”子选项卡，但我不知道还要写什么。 任何帮助表示赞赏！

javascript html css tabs
1个回答
0
投票

根据我的理解，你想要一个子菜单或某种类似的菜单 所以我改变了你的javascript代码（实际上我删除了整个代码并重写了它）以获得你想要的子菜单。 这是片段：

// here we calling the objects:

const pc_btn = document.querySelector('#pc_btn')
const pc_subtab = document.querySelector('#pc')

const upg_btn = document.querySelector('#upg_btn')
const upg_subtab = document.querySelector('#upgrades')

const opt_btn = document.querySelector('#opt_btn')
const opt_subtab = document.querySelector('#options')

// here are the functions:
pc_btn.addEventListener('click',function(){
    pc_subtab.classList.toggle('active')
    upg_subtab.classList.remove('active')
    opt_subtab.classList.remove('active')

})

upg_btn.addEventListener('click',function(){
    upg_subtab.classList.toggle('active')
    pc_subtab.classList.remove('active')
    opt_subtab.classList.remove('active')
})

opt_btn.addEventListener('click',function(){
    opt_subtab.classList.toggle('active')
    pc_subtab.classList.remove('active')
    upg_subtab.classList.remove('active')
})
.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;
}
.active{
    display: block;
}

.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;
}
<!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="1.css">
</head>

<body>
    <div class="tab">
        <!-- I changed the code a bit here (i added the ids and removed the onclicks) -->
        <button class="tablinks" id="pc_btn">PC</button>
        <button class="tablinks" id="upg_btn">Upgrades</button>
            <button class="tablinks" id="opt_btn">Options</button>
    </div>
    <div id="pc" class="tabcontent">
        <div class="subtab">
            <button class="tablinks">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><!-- i think you had forgotten this </div> to close the #pc 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>


</body>
<script src="1.js"></script>

</html>

我希望它能解决您的问题，祝您有美好的一天。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.