1
Это только часть моего кода, есть много вкладок, но только родитель и ребенок, я не видел никого здесь, кто кодов вроде меня , все они используют $. Поэтому я не могу использовать их код, и я новичок в кодировании, поэтому я не могу расшифровать и перезаписать свой код. Надеюсь, вы поймете, что я здесь написал, это для игры, в которую я играю. Было бы очень приятно, если бы я мог получить ответ. :) Благодаря. Кроме того, если вам нужна дополнительная информация о некоторых строках кода, я добавлю дополнительную информацию. Как открыть вкладку моего ребенка без закрытия моей родительской вкладки
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{
\t display:none;
}
.armorcontent{
\t display:none;
}
li a {
\t display: block;
\t color: black;
\t text-align: center;
\t padding: 14px 16px;
\t text-decoration: none;
}
li{
\t float: left;
}
li a:hover:not(.active){
\t background-color: black;
\t color: red;
}
#mainNav{
\t list-style-type: none;
\t background-color: #f7f5f3;
\t width: 100%;
\t padding: 0;
\t overflow: hidden;
\t top: 0;
}
ul{
\t list-style-type: none;
\t background-color: #f7f5f3;
\t width: 100%;
\t padding: 0;
\t overflow: hidden;
\t top: 0;
\t margin: 0;
\t border-radius: 20px 20px 0px 0px;
}
ul#mainNav{
\t background-color: rgba(100, 0, 0, 0.5);
}
footer{
\t bottom: 0;
\t position: fixed;
\t background-color: rgba(192, 192, 192, 0.4);
\t margin-left: 273px;
\t padding: 10px 12px;
\t border-radius: 20px 0px;
}
section div{
\t background-color: rgba(180, 0, 0, .6);
\t padding: 8px 10px;
\t 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 -->\t \t \t <ul class="tab">
\t \t \t \t <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Armor')">Armor</a></li>
\t \t \t \t <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Weapons')">Weapons</a></li>
\t \t \t </ul>
\t \t \t <div id="Armor" class="armorcontent">
\t \t \t \t <ul class="tab">
\t \t \t \t \t <li><a href="javascript:void(0)" class="armorlinks" onclick="openArmor(event, 'Adventurer')">Adventurer</a></li>
\t \t \t \t </ul>
\t \t \t \t <div id="Adventurer" class="armorcontent">
<table>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th>Item</th>
\t \t \t \t \t \t <th>Stats</th>
\t \t \t \t \t \t <th>Set Effect</th>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th rowspan="4">Helemt</th>
\t \t \t \t \t \t <td>DP</td>
\t \t \t \t \t \t <td rowspan="16">Set Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th rowspan="4">Chest</th>
\t \t \t \t \t \t <td>DP</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th rowspan="4">Gloves</th>
\t \t \t \t \t \t <td>DP</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th rowspan="4">Shoes</th>
\t \t \t \t \t \t <td>DP</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Item Effect</td>
\t \t \t \t \t </tr>
\t \t \t \t </table>
\t \t \t </div>
<!-- begin snippet: js hide: false console: true babel: false -->
Можете ли вы привести пример jsbin или jsfiddle? Что вы имеете в виду «закрытие вкладки родителей» – Arvin
для переключения, я бы спрятал их все, а затем спрятал тот, который вам нужен. Таким образом, вам не нужно беспокоиться о комбинациях. – dandavis
Вот очень важная вещь, о которой вы не знаете, это то, что для размещения комментариев в HTML вы должны обернуть комментарии так: '' not '/ * COMMENT * /' Предоставить [mcve] , – zer00ne