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

【问题标题】：I have a css navigation bar with three items. I want to make each link show its own content without overlapping the other one我有一个包含三个项目的 CSS 导航栏。我想让每个链接显示自己的内容而不重叠另一个
【发布时间】：2018-08-06 01:22:06
【问题描述】：

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

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。

【问题讨论】：

你在使用 jQery 吗？

标签： javascript jquery css show-hide

【解决方案1】：

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

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

然后，在 JS 中初始化 tabs 和 tabContent，并为每个 tab 添加一个 click 事件侦听器，该侦听器隐藏每个 tabContent，然后显示与 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>

告诉我进展如何！

JsFiddle

【讨论】：