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にコメントを置く必要があるということです。コメントを次のようにラップする必要があります： '<！ - COMMENT - >' not '/ * COMMENT * /' [mcve] 。 – zer00ne