时间戳

首页 > 解决方案 > 我有一个包含三个项目的 CSS 导航栏。我想让每个链接显示自己的内容而不重叠另一个

javascript - 我有一个包含三个项目的 CSS 导航栏。我想让每个链接显示自己的内容而不重叠另一个

问题描述

这是我到目前为止所拥有的，它工作正常，但一旦激活另一个链接就不会消失。

function skillsFunction () {
    var x = document.getElementById("mySkills");
    if (x.style.display == "none"){
    	x.style.display = "block"; {}
    } else {
    	x.style.display = "none";
    } 
}
        
let openTab = (event, tabNumber) => {
    const tabContent = document.getElementsByClassName("tabContent");
    
    for(let tab of tabContent) {
    	tab.style.display = "none";
    }
    document.getElementById(tabNumber).style.display = "block";
}
<div class="tabs">
    <span class="tab" onclick="openTab(event,1)">Projects</span>
    <span class="tab" onclick="openTab(event,2)">Skills</span>
    <span class="tab" onclick="openTab(event,3)">Courses</span>
</div>

<div class="mySkills" id="2"></div>
<div class="myCourses" id="3"></div>
<!--START OF PROJECTS WRAPPER-->
<div class="projectsWrapper" id="1">

这是我第一次使用 JavaScript。

标签： javascriptjquerycssshow-hide

解决方案

好吧，首先使用 HTML 来处理点击通常不是一个好习惯onclick=""，所以我们宁愿使用 JS 来附加一个事件监听器。

在 HTML 中，将tabContent缺少的类添加id到每个选项卡，然后添加"div" + tabId到每个正文内容（ID 可以是您想要的任何内容，只要保持它们相同即可）。还添加display:none以最初关闭内容（可能选择一个开始打开并保持没有display:none）（当然更改布局/任何内容以适应您的 HTML 的其余部分）：

然后，在 JS 中初始化选项卡和选项卡内容，并为每个选项卡添加一个单击事件侦听器，该侦听器隐藏每个选项卡内容，然后显示与 tabId 匹配的选项卡。

    const tabs = document.getElementsByClassName("tab");
    const tabContent = document.getElementsByClassName("tabContent");

    for(var i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener("click", function(event) {
        for(var i = 0; i < tabContent.length; i++) {
          tabContent[i].style.display = "none";
        }
  
        var tabId = event.target.id;
        document.getElementById("div" + tabId).style.display = "block";
      });
    }
    <span id="PROJECTS" class="tab">Projects</span>
    <span id="SKILLS" class="tab">Skills</span>
    <span id="COURSES" class="tab">Courses</span>
    
    <div class="mySkills tabContent" id="divSKILLS" style="display:none">
      Skills
    </div>
    <div class="myCourses tabContent" id="divCOURSES" style="display:none">
      Courses
    </div>
    <div class="projectsWrapper tabContent" id="divPROJECTS" style="display:none">
      Projects
    </div>

让我知道事情的后续！

提琴手

推荐阅读