Javascript標簽
[英]Javascript Tabs
問題描述
我需要一些幫助來使這些選項卡正常工作。 我已經創建了標題標簽，以便在我正在從事的學校項目中導航。 我還在表上創建了選項卡，以幫助用戶像這樣瀏覽表：
由於某些原因，當我單擊表格選項卡“所有” /“授權軟件” /“設備”時，它們消失了，並且相應的表格信息顯示如下：
我已經嘗試了一切，但似乎無法解決問題。 這是我的JavaScript代碼：
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";
}
這是相應的HTML：
<body>
<div>
<center>
<img src="C:\Users\Fatu.Khalid\Documents\Computerscience\logo.png">
</center>
</div>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">
<font color="white">Home</font>
</button>
<button class="tablinks" onclick="openTab(event, 'New')">
<font color="white">New</font>
</button>
<button class="tablinks" onclick="openTab(event, 'Calls')">
<font color="white">Calls</font>
</button>
<button class="tablinks" onclick="openTab(event, 'Specialist')">
<font color="white">Specialist</font>
</button>
<button class="tablinks" onclick="openTab(event, 'Equipment')">
<font color="white">Equipment</font>
</button>
</div>
<div id="Equipment" class="tabcontent">
<input type='text' class='search' />
<br>
<br>
<br>
<div class="secondtabs">
<button class="tablinks" onclick="openTab(event, 'All')" style="margin: 1px; width:10%;">All</button>
<button class="tablinks" onclick="openTab(event, 'Authorised Software')" style="margin: 1px; width: 15%;">Authorised
Software</button>
<button class="tablinks" onclick="openTab(event, 'EquipmentPage')" style="margin: 1px; width: 12%;">Equipment</button>
</div>
</div>
<div id='All' class='tabcontent' style="background-color: #ffe866;">
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;">Name
Microsoft office</li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;">Name:
Desktop Monitor        Serial number: 8302730280</li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
</div>
<div id='Authorised Software' class='tabcontent' style="background-color: #ffe866;">
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
</div>
<div id='EquipmentPage' class='tabcontent' style="background-color: #ffe866;">
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
<li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"></li>
</div>
</body>
2 個解決方案
解決方案1
0 2018-10-30 16:09:02
這是我用純JavaScript制作的標簽導航的鏈接：
HTML：
<ul class="tab-list">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<section class="tabs-content-list">
<ul class="active">
<li>Lorem ipsum dolor sit amet</li>
<li>Nunc varius felis</li>
</ul>
<ul>
<li>Duis felis velit</li>
<li>Fusce sed dolor</li>
<li>Nam ac accumsan</li>
</ul>
<ul>
<li>Morbi laoreet nisi tortor</li>
<li>Phasellus posuere</li>
</ul>
</section>
CSS：
body {
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
}
.tab-list li {
cursor: pointer;
}
.tab-list li.active {
color: cornflowerblue;
}
.tabs-content-list > * {
display: none;
}
.tabs-content-list > *.active {
display: block;
}
JS：
var tabs = function (tabsList, tabsContentList) {
var tabs = tabsList[0].children;
var tabsContent = tabsContentList[0].children;
for (i = 0; i < tabs.length; i++) {
tabs[i].setAttribute('data-tab', 'tab-' + (i + 1) + '');
tabsContent[i].classList.add('tab-' + (i + 1) + '');
tabs[i].onclick = function () {
var tab_class = this.getAttribute('data-tab');
for (j = 0; j < tabsContent.length; j++) {
tabs[j].classList.remove('active');
tabsContent[j].classList.remove('active');
}
this.classList.add('active');
document.getElementsByClassName(tab_class)[0].classList.add('active');
}
}
}
var tabsList = document.getElementsByClassName('tab-list');
var tabsContentList = document.getElementsByClassName('tabs-content-list');
tabs(tabsList, tabsContentList);
解決方案2
-1 2018-10-30 15:59:11
看看你的：
<div id="Equipment" class="tabcontent">
該class="tabcontent"與您的代碼在此處匹配：
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
...因此它隱藏了“設備”標簽部分。
您可以刪除或更改“設備”部分的類，例如：
<div id="Equipment">
JavaScript - 標簽內的標簽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.