コンテンツの表示/非表示

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. クラスを追加section要素

から0は、我々はそうのようにこれを行うことができます：私はJSFiddleに私の変更を保存した

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

ので、あなたが見ることができます。