Show/Hide 内容

Question

我需要创建一个 ~~脚本，其中将隐藏所有内容，但为我的 JavaScript class.[=38 选择了一个部分=]~~ 函数，其中侦听特定 HTML 部分的点击事件。触发此事件后，我需要显示被单击的部分，同时隐藏其他部分。我想我已经正确编码了 EventListener 和 hide function！但是，我认为我运行陷入这些问题的地方在于我的职能。遗憾的是，这一切都必须在 JavaScript 中完成（使用 HTML 和一些 CSS）。我们需要有一个导航栏和 querySelectors 以及 event.targets.

这是我目前的情况：

设置对象引用

link1 = document.getElementById("program"); link2 = document.getElementById("history"); link3 = document.getElementById("efficiency"); link4 = document.getElementById("brains");

添加事件侦听器

addEventListener("click", clicked); link1.addEventListener("click", clicked); link2.addEventListener("click", clicked); link3.addEventListener("click", clicked); link4.addEventListener("click", clicked);

显示内容

function clicked(event){ for (var i = 0; i<sections.length; i++){ sections[i].className = "hidden"; //Looks at all the sections then changes/adds all the class names to "hidden" } event.target.href; event.target.className = ""; //event.target.hash.className = "show"; console.log(event.target.hash); //Logs tha function works and which link has been clicked }

我想知道我是否可以得到一些帮助？！

我的完整代码在 JSFiddle!

谢谢！

更新：我已经缩小了我的问题范围！

Answer 1

首先，我们需要一些方法来 link 其部分的标题。我通过将 data attributes 添加到导航栏 links:

来完成此操作

<nav>
    <a href="#program" data-section="program">Programming</a>
    <a href="#history" data-section="history">History</a>
    <a href="#efficiency" data-section="efficiency">Efficiency</a>
    <a href="#brains" data-section="brains">Brains</a>
</nav>

如您所见，data-section 属性是我们要打开的部分的确切 ID。

然后，我们需要能够获得给定 data-section 属性的部分：

function getSection(name) {
    // find the section element with ID matching the name
    return document.querySelector("section#" + name);
}

然后，在我们的 clicked 活动中，我们需要：

获取点击元素的data-section信息
获取该部分的元素
将 class show 添加到部分元素

我们可以这样做：

var name = event.target.dataset.section;
var section = getSection(name);
section.className = "show";

我已将更改存储在 JSFiddle 上，以便您查看。

Show/Hide 内容

Show/Hide Content

javascript

events

show-hide

sections