Javascript选项卡_Javascript_Html

Javascript选项卡

javascript html

Javascript选项卡,javascript,html,Javascript,Html,我需要一些帮助让这些标签工作。我已经创建了标题选项卡，用于我正在处理的学校项目的导航。我还在表格上创建了选项卡，以帮助用户导航表格：出于某种原因，当我单击表格选项卡“所有”/“授权软件”/“设备”时，它们将消失，相应的表格信息如下所示：我什么都试过了，但似乎解决不了问题。这是我的javascript代码： function openTab(evt, TabName) { var i, tabcontent, tablinks; tabcontent = document

我需要一些帮助让这些标签工作。我已经创建了标题选项卡，用于我正在处理的学校项目的导航。我还在表格上创建了选项卡，以帮助用户导航表格：

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

我什么都试过了，但似乎解决不了问题。这是我的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"; 
}

函数openTab（evt，TabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i


这是对应的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>


家
刚出现的
电话
专家
设备






全部的
授权的
软件
设备
名称
微软办公室
名称：
桌面监视器nbsp nbsp nbsp nbsp nbsp序列号：8302730280













看看您的：
<div id="Equipment" class="tabcontent">

…因此它隐藏了设备选项卡部分
您可以删除或更改设备部分的类，例如：
<div id="Equipment">

以下是我用纯javascript制作的选项卡导航链接：
HTML:
JS:
var tabs=函数（tabsList、tabsContentList）{
var tabs=tabsList[0]。子项；
var tabsContent=tabsContentList[0]。子项；
对于（i=0；i

首先：您应该在HTML页面标题中使用CSS文件和。第二：应该可以帮助你。授权软件不是一个有效的id，但我建议你用谷歌搜索并研究一些其他的解决方案。有很多解决方案，这是一项非常常见的任务。在示例的最后。document.getElementById（TabName）.style.display=“block”；这实际上没有帮助；它只影响选项卡名，而不影响整个部分。OP肯定需要解决我描述的冲突。当然，如果答案对你有效，请接受。
<div id="Equipment">

<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>

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;
}

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);