javascript - 如何在不关闭父选项卡的情况下打开子选项卡

Question

这只是我代码的一部分，有很多选项卡，但只有一个父级和一个子级，我在这里没有看到有人像我一样编码，他们都使用$。所以我不能使用他们的代码，而且我是编码新手，所以我无法破译和重写他们的代码。我希望你能理解我在这里写的内容，这是我玩的游戏。如果我能得到答案那就太好了。 :) 谢谢。另外，如果您需要有关某些代码行的更多信息，我将添加更多信息。

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.className += " active";
}
function openArmor(evt, tabArmor) {
    var i, armorcontent, armorlinks;
    armorcontent = document.getElementsByClassName("armorcontent");
    for (i = 0; i < armorcontent.length; i++) {
        armorcontent[i].style.display = "none";
    }
    armorlinks = document.getElementsByClassName("armorlinks");
    for (i = 0; i < armorlinks.length; i++) {
        armorlinks[i].className = armorlinks[i].className.replace("active", "");
    }
    document.getElementById(tabArmor).style.display = "block";
    evt.className += " active";
}

.tabContent{
	display:none;
}
.armorcontent{
	display:none;
}
li a {
	display: block;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
li{
	float: left;
}
li a:hover:not(.active){
	background-color: black;
	color: red;
}
#mainNav{
	list-style-type: none;
	background-color: #f7f5f3;
	width: 100%;
	padding: 0;
	overflow: hidden;
	top: 0;
}
ul{
	list-style-type: none;
	background-color: #f7f5f3;
	width: 100%;
	padding: 0;
	overflow: hidden;
	top: 0;
	margin: 0;
	border-radius: 20px 20px 0px 0px;
}
ul#mainNav{
	background-color: rgba(100, 0, 0, 0.5);
}
footer{
	bottom: 0;
	position: fixed;
	background-color: rgba(192, 192, 192, 0.4);
	margin-left: 273px;
	padding: 10px 12px;
	border-radius: 20px 0px;
}
section div{
	background-color: rgba(180, 0, 0, .6);
	padding: 8px 10px;
	height: 90%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}



<!-- begin snippet: js hide: false console: true babel: false -->

			<ul class="tab">
				<li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Armor')">Armor</a></li>
				<li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Weapons')">Weapons</a></li>
			</ul>
			<div id="Armor" class="armorcontent">
				<ul class="tab">
					<li><a href="javascript:void(0)" class="armorlinks" onclick="openArmor(event, 'Adventurer')">Adventurer</a></li>
				</ul>
				<div id="Adventurer" class="armorcontent">
                     <table>
					<tr>
						<th>Item</th>
						<th>Stats</th>
						<th>Set Effect</th>
					</tr>
					<tr>
						<th rowspan="4">Helemt</th>
						<td>DP</td>
						<td rowspan="16">Set Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<th rowspan="4">Chest</th>
						<td>DP</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<th rowspan="4">Gloves</th>
						<td>DP</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<th rowspan="4">Shoes</th>
						<td>DP</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
					<tr>
						<td>Item Effect</td>
					</tr>
				</table>
			</div>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

如果你想像我一样在选项卡中创建一个选项卡，你所需要做的就是将第二个函数var从“i”更改为“a”，它会分隔函数并导致父选项卡在子选项卡时停止关闭已打开。