tabs 相关问题

一种用户界面模式，允许在内容的上方，下方或侧面显示带有导航参考的多个页面或元素。单击导航参考时，一个元素可见，而其他元素则关闭。通常，导航参考以指示其当前可见的方式进行颜色编码。

所以我正在制作一个小游戏，并且我正在尝试制作子选项卡。但问题是当我单击“打开子选项卡”按钮时，它会隐藏整个子选项卡。这是我的 HTML 代码：所以我正在制作一个小游戏，并且我正在尝试制作子选项卡。但问题是当我单击“打开子选项卡”按钮时，它会隐藏整个子选项卡。这是我的 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代码（实际上我删除了整个代码并重写了它）以获得你想要的子菜单。这是片段： // 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">  <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> <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> 我希望它能解决您的问题，祝您有美好的一天。

javascript html css tabs

回答 1 投票 0

编写一个循环来检查所有选项卡、工作表计数、基于 3 个单元格值的选项卡颜色变化

我有一个带有多个选项卡的电子表格。这是为了定价。第一个选项卡可以在 4 行中更改，以更改位于其自己选项卡上的每个零件编号的利润。我想要一个循环代码...

excel vba colors tabs cell

回答 1 投票 0

无法使用 Cypress 在同一选项卡中打开链接

在我们的网页中，我们有各种在新选项卡中打开的链接，但显然我们在使用 Cypress 时需要在同一选项卡中打开它们。我试过了 cy.get('tr td:nth-child(9)').eq(index).invoke('删除...

jquery tabs cypress href

回答 2 投票 0

使选项卡栏选定的选项卡下划线仅与标签文本一样长

我希望能够使选项卡栏中所选选项卡的下划线与该选项卡的文本一样长（如下所示）。我相信我的问题是我有一个 SizedBox ，它定义了 w...