我有一个css导航栏，里面有三个项目.我想让每个链接都显示自己的内容，而不与其他链接重叠

Question

这是我迄今为止所拥有的，它运行良好，但不会在激活另一个链接后消失。

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。

Answer 1

Alrighty，首先，使用HTMLonclick=""来处理点击通常不是一个好的做法，所以我们宁愿使用JS来附加事件侦听器。

在HTML中，将缺少的tabContent类、一个id添加到每个选项卡，并将"div" + tabId添加到每个正文内容(Id可以是任何您想要的，只是保持不变(。此外，添加display:none以初始启动关闭的内容(可能选择一个开始打开，然后不使用display:none((当然，还可以更改布局/任何内容以适应HTML的其余部分(：

然后，在JS中初始化选项卡和tabContent，并为每个选项卡添加一个隐藏每个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>

让我知道进展如何！

Js报价