显示/隐藏内容

Question

我需要创建一个 脚本，其中将隐藏除为我的 JavaScript 类选择的一个部分之外的所有内容。 函数在其中侦听单击事件以特定的 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

首先，我们需要一些方法将标题链接到它们的部分。我通过将data attributes 添加到导航栏链接来做到这一点：

<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 事件中，我们需要：

1. 从被点击的元素中获取data-section信息
2. 获取该部分的元素
3. 将 show 类添加到部分元素中

我们可以这样做：

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

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