我正试图根据选项卡的内容创建不同的概述。市场概述显示了一般概述，可分为"今日"one_answers"本周"，OMXC25是一个市场和另一个包含更具体信息的选项卡。
当前设置在打开另一个选项卡时不会关闭选项卡，而是在同一概览中打开表。代码可以运行，示例显示了上述问题。单击"今日"然后单击"本周"应关闭"今日"选项卡，但单击"OMXC25"时应关闭"市场概述"选项卡并仅显示"OMXC25"选项卡
要查看正在运行的选项卡，请随时在网站上查看：https://signal-invest.com/overview/正如您所看到的，选项卡不会关闭。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.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;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button style="color:black;" class="tablinks" onclick="openCity(event, 'Markets_Today')">Markets Today</button>
<button style="color:black;" class="tablinks" onclick="openCity(event, 'OMXC25')">OMXC25</button>
</div>
<div id="Markets_Today" class="tabcontent">
<div class="tab">
<button style="color:black;" class="tablinks" onclick="openCity(event, 'Today')">Today</button>
<button style="color:black;" class="tablinks" onclick="openCity(event, 'This_week')">This week</button>
</div>
<div id="Today" class="tabcontent">
<table class="sortable">
<tr>
<H3>Market Overview - Today</H3>
<th>Market</th>
<th>MACD buy signals</th>
<th>MACD sell signals</th>
</tr>
</table>
</div>
<div id="This_week" class="tabcontent">
<table class="sortable">
<tr>
<H3>Market Overview - This week</H3>
<th>Market</th>
<th>MACD buy signals</th>
<th>MACD sell signals</th>
</tr>
</table>
</div>
</div>
<div id="OMXC25" class="tabcontent">
<table class="sortable">
<tr>
<H3>OMXC25</H3>
<th>Company</th>
<th>Ticker</th>
<th>Latest MACD Signal</th>
<th>Date of signal</th>
</tr>
</table>
</div>
<script>
//script for tabs in tables.
function openCity(evt, cityName) {
let i, tabcontent, tablinks;
const targetTab = document.querySelector(`#${cityName}.tabcontent`);
tabcontent = [...document.getElementsByClassName("tabcontent")].filter(el => el.parentElement === targetTab.parentElement);
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].hidden = true;
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
targetTab.style.display = "block";
evt.currentTarget.classList.add("active");
}
</script>
</body>
</html>当你试图隐藏tabecontents时，你有一个小错误，
不使用隐藏，而是使用样式的diplay属性，如下所示：
.
.
for (i = 0; i < tabcontent.length; i++) {
// instead of tabcontent[i].hidden = true;
// use below :
tabcontent[i].style.display = 'none';
}
...
参见片段：
//script for tabs in tables.
function openCity(evt, cityName) {
let i, tabcontent, tablinks;
const targetTab = document.querySelector(`#${cityName}.tabcontent`);
tabcontent = [...document.getElementsByClassName("tabcontent")].filter(el => el.parentElement === targetTab.parentElement);
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].classList.remove("active");
}
targetTab.style.display = "block";
evt.currentTarget.classList.add("active");
}body {
font-family: Arial;
}
/* Style the tab */
.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;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button style="color:black;" class="tablinks" onclick="openCity(event, 'Markets_Today')">Markets Today</button>
<button style="color:black;" class="tablinks" onclick="openCity(event, 'OMXC25')">OMXC25</button>
</div>
<div id="Markets_Today" class="tabcontent">
<div class="tab">
<button style="color:black;" class="tablinks" onclick="openCity(event, 'Today')">Today</button>
<button style="color:black;" class="tablinks" onclick="openCity(event, 'This_week')">This week</button>
</div>
<div id="Today" class="tabcontent">
<table class="sortable">
<tr>
<H3>Market Overview - Today</H3>
<th>Market</th>
<th>MACD buy signals</th>
<th>MACD sell signals</th>
</tr>
</table>
</div>
<div id="This_week" class="tabcontent">
<table class="sortable">
<tr>
<H3>Market Overview - This week</H3>
<th>Market</th>
<th>MACD buy signals</th>
<th>MACD sell signals</th>
</tr>
</table>
</div>
</div>
<div id="OMXC25" class="tabcontent">
<table class="sortable">
<tr>
<H3>OMXC25</H3>
<th>Company</th>
<th>Ticker</th>
<th>Latest MACD Signal</th>
<th>Date of signal</th>
</tr>
</table>
</div>
</body>
</html>