javascript - Javascript 选项卡

问题描述

我需要一些帮助才能使这些选项卡正常工作。我已经创建了标题选项卡，用于在我正在处理的学校项目中进行导航。我还在表格上创建了选项卡，以帮助用户浏览表格：

出于某种原因，当我单击表格选项卡“全部”/“授权软件”/“设备”时，它们消失了，相应的表格信息显示如下：

我已经尝试了一切，但似乎无法解决问题。这是我的 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&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSerial 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>

标签： javascripthtml

解决方案

这是我用纯 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);

https://jsfiddle.net/gentian28/k27y5t4d/

javascript - Javascript 选项卡

问题描述

解决方案

推荐阅读