显示/隐藏内容

我需要创建一个 ~~脚本，其中将隐藏所有内容，而不是为我的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 
}

我，如果我不需经过琢磨d得到一些帮助？！

我的完整密码在JSFiddle！

谢谢！

UPDATE：我缩小了我的问题范围！

来源

2017-03-13 KD_13

您不可能对此问题提供任何帮助，因为它是@ KD_13 - 尝试将其缩小到单个不同的问题，然后提出问题。 –

感谢@JamesMonger的建议！我刚刚这样做！ –

首先，我们需要一些方法将标题链接到它们的部分。我已经加入到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到型材件

我们可以做到这一点，像这样：

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

我已经保存在我的JSFiddle变化，所以你可以看到。

来源

2017-03-13 11:45:52

它工作！非常感谢！！！ –

不用担心。欢迎来到堆栈溢出！ –

显示/隐藏内容

回答

相关问题