Question

我需要创建一个 ~~脚本，其中将隐藏所有内容，但是为我的JavaScript类选择了一个部分。~~ 函数，其中侦听click事件特定的HTML部分。触发此事件后，我需要显示其中隐藏其他部分的部分。我想我已正确编码EventListener＆{39}和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事件中，我们需要：

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

我们可以这样做：

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

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

显示/隐藏内容

1 个答案: