显示/隐藏导航栏元素

Question

我想点击一个元素来显示，当我点击另一个元素时，第一个元素要隐藏。我想用4个元素来做这件事，但这只适用于当我按顺序做这件事时，一旦我跳过一个按钮，元素就会堆叠在一起，而不会隐藏。

一些代码:

function showHomePage() {
document.getElementById("home").style.display = "block";
}
function showSkillsPage() {
document.getElementById("home").style.display = "none";
document.getElementById("skills").style.display = "block";
}

function showProjectsPage() {
document.getElementById("skills").style.display = "none";
document.getElementById("projects").style.display = "block";
}

function showLanguagesPage() {
document.getElementById("projects").style.display = "none";
document.getElementById("languages").style.display = "block";
}

showHomePage();

#home, #skills, #projects, #languages {
display: none;
}

<ul id="top-menu-bar">
<li><a href="#" onclick="showHomePage()" >Home</a></li>
<li><a href="#" onclick="showSkillsPage()" >Skills</a></li>
<li><a href="#" onclick="showProjectsPage()" >Projects</a></li>
<li><a href="#" onclick="showLanguagesPage()" >Languages</a></li>
</ul>
<p id="home">I'm the home page.</p>
<p id="skills">I'm the skills page.</p>
<p id="projects">I'm the projects page.</p>
<p id="languages">I'm the languages page.</p>

Answer 1

当你应该设置所有你不想看到的项目时，你只将一些项目的display属性设置为none。

当你打乱顺序的时候，物品会堆叠起来，因为你的show...()函数只设置了它们之前物品的display属性。

下面是一个隐藏所有项目的示例，除了你点击的那个:

function showHomePage() {
document.getElementById("home").style.display = "block";
document.getElementById("skills").style.display = "none";
document.getElementById("projects").style.display = "none";
document.getElementById("languages").style.display = "none";
}
function showSkillsPage() {
document.getElementById("home").style.display = "none";
document.getElementById("skills").style.display = "block";
document.getElementById("projects").style.display = "none";
document.getElementById("languages").style.display = "none";
}

function showProjectsPage() {
document.getElementById("home").style.display = "none";
document.getElementById("skills").style.display = "none";
document.getElementById("projects").style.display = "block";
document.getElementById("languages").style.display = "none";
}

function showLanguagesPage() {
document.getElementById("home").style.display = "none";
document.getElementById("skills").style.display = "none";
document.getElementById("projects").style.display = "none";
document.getElementById("languages").style.display = "block";
}

showHomePage();

#home, #skills, #projects, #languages {
display: none;
}

<ul id="top-menu-bar">
<li><a href="#" onclick="showHomePage()" >Home</a></li>
<li><a href="#" onclick="showSkillsPage()" >Skills</a></li>
<li><a href="#" onclick="showProjectsPage()" >Projects</a></li>
<li><a href="#" onclick="showLanguagesPage()" >Languages</a></li>
</ul>
<p id="home">I'm the home page.</p>
<p id="skills">I'm the skills page.</p>
<p id="projects">I'm the projects page.</p>
<p id="languages">I'm the languages page.</p>

---

这解决了问题，但它仍然非常重复。您可以通过为您的项目引入const引用变量来稍微清理它。这也会对性能有所帮助，因为您不必在每次单击项时都在DOM中搜索它们。

const home = document.getElementById("home");
const skills = document.getElementById("skills");
const projects = document.getElementById("projects");
const languages = document.getElementById("languages");

function showHomePage() {
home.style.display = "block";
skills.style.display = "none";
projects.style.display = "none";
languages.style.display = "none";
}
function showSkillsPage() {
home.style.display = "none";
skills.style.display = "block";
projects.style.display = "none";
languages.style.display = "none";
}

function showProjectsPage() {
home.style.display = "none";
skills.style.display = "none";
projects.style.display = "block";
languages.style.display = "none";
}

function showLanguagesPage() {
home.style.display = "none";
skills.style.display = "none";
projects.style.display = "none";
languages.style.display = "block";
}

showHomePage();

#home, #skills, #projects, #languages {
display: none;
}

<ul id="top-menu-bar">
<li><a href="#" onclick="showHomePage()" >Home</a></li>
<li><a href="#" onclick="showSkillsPage()" >Skills</a></li>
<li><a href="#" onclick="showProjectsPage()" >Projects</a></li>
<li><a href="#" onclick="showLanguagesPage()" >Languages</a></li>
</ul>
<p id="home">I'm the home page.</p>
<p id="skills">I'm the skills page.</p>
<p id="projects">I'm the projects page.</p>
<p id="languages">I'm the languages page.</p>

---

你可以更清楚地认识到，你可以隐藏所有的项目，然后显示你想要的一个。

const all = document.querySelectorAll("#home, #skills, #projects, #languages");
const home = document.getElementById("home");
const skills = document.getElementById("skills");
const projects = document.getElementById("projects");
const languages = document.getElementById("languages");
function showHomePage() {
all.forEach(item => item.style.display = "none");
home.style.display = "block";
}
function showSkillsPage() {
all.forEach(item => item.style.display = "none");
skills.style.display = "block";
}

function showProjectsPage() {
all.forEach(item => item.style.display = "none");
projects.style.display = "block";
}

function showLanguagesPage() {
all.forEach(item => item.style.display = "none");
languages.style.display = "block";
}

showHomePage();

#home, #skills, #projects, #languages {
display: none;
}

<ul id="top-menu-bar">
<li><a href="#" onclick="showHomePage()" >Home</a></li>
<li><a href="#" onclick="showSkillsPage()" >Skills</a></li>
<li><a href="#" onclick="showProjectsPage()" >Projects</a></li>
<li><a href="#" onclick="showLanguagesPage()" >Languages</a></li>
</ul>
<p id="home">I'm the home page.</p>
<p id="skills">I'm the skills page.</p>
<p id="projects">I'm the projects page.</p>
<p id="languages">I'm the languages page.</p>

---

作为最后一步，您可以将此逻辑移动到单个事件处理程序中。不是监听项目上的点击，而是监听NavBar本身的点击，并使用事件的Event.target属性来确定哪个项目被点击了。

您需要使用自定义数据属性之类的东西来跟踪id，以便在单击项时显示/隐藏。

const targets = {
"home": document.getElementById("home"),
"skills": document.getElementById("skills"),
"projects": document.getElementById("projects"),
"languages": document.getElementById("languages")
};
function showPage(event) {
if (!event.target.dataset.targetId) return;
Object.values(targets).forEach(item => item.style.display = "none");
targets[event.target.dataset.targetId].style.display = "block";
}

#skills, #projects, #languages {
display: none;
}

<ul id="top-menu-bar" onclick="showPage(event)">
<li><a href="#" data-target-id="home">Home</a></li>
<li><a href="#" data-target-id="skills">Skills</a></li>
<li><a href="#" data-target-id="projects">Projects</a></li>
<li><a href="#" data-target-id="languages">Languages</a></li>
</ul>
<p id="home">I'm the home page.</p>
<p id="skills">I'm the skills page.</p>
<p id="projects">I'm the projects page.</p>
<p id="languages">I'm the languages page.</p>

Answer 2

我完全覆盖了您的代码，以便您能够轻松地扩展它。

首先，我删除了您的内联onclick事件。将页面ID设置为链接的HREF。然后我给每个页面一个页面类，默认情况下在CSS中是隐藏的。然后是显示页面的active的新类。

javascript将事件监听器添加到父导航中，然后查找被点击的内容的href。然后，它遍历所有可见页面(那些具有.active的页面)并删除active。然后将活动类添加到目标页面。

这个答案允许你根据需要添加，更改导航和页面，而无需更新你的javascript。

let menuBar = document.querySelector("#top-menu-bar");
menuBar.addEventListener("click", function(e) {
e.preventDefault();
let nav = e.target;
let targetPage = nav.getAttribute("href");
if (targetPage) {
let visible = document.querySelector(".page.active");
if (visible) {
visible.classList.remove("active");
}
let target = document.querySelector(targetPage);
target.classList.toggle("active");
}
});

.page {
display: none;
}
.page.active {
display: block;
}

<ul id="top-menu-bar">
<li><a href="#home">Home</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#languages">Languages</a></li>
</ul>
<p class="page active" id="home">I'm the home page.</p>
<p class="page" id="skills">I'm the skills page.</p>
<p class="page" id="projects">I'm the projects page.</p>
<p class="page" id="languages">I'm the languages page.</p>