콘텐츠 표시/숨기기

Question

스크립트를 만들어야 내 자바 스크립트 클래스로 선택된 하나의 섹션을 제외하고 모든 콘텐츠를 숨길 수 있습니다. 특정 HTML 섹션에 대한 클릭 이벤트를 수신하는 함수입니다. 이 이벤트가 트리거되면 다른 섹션을 숨기고 클릭 한 섹션을 표시해야합니다. 나는 EventListener과 hide function을 올바르게 코딩했다고 생각합니다. 그러나, 나는 내가이 문제에 뛰어 드는 곳이 내 기능과 관련이 있다고 생각한다. 안타깝게도,이 작업은 모두 JavaScript (HTML 및 CSS 포함)에서 수행해야합니다. 탐색 막대가 있어야하며 event.targets와 함께 querySelector가 있어야합니다.

설정 객체가

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); 

쇼 이벤트 리스너를 추가 참조 내가 coul 경우 내용

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에 있습니다!

감사합니다!

업데이트 : 나는 나의 질문을 좁혔다!

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 속성에 대한 섹션을 얻을 수 있어야합니다 :

1. 가에서 data-section 정보를 얻을 : 우리 clicked 경우에,

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

   다음, 우리는 필요 클릭 된 요소

2. 섹션의 요소 얻기
3. 클래스 추가섹션 요소

-0 우리는과 같이이 작업을 수행 할 수 있습니다 내가 JSFiddle 내 변경 내용을 저장 한

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

그래서 당신은 볼 수 있습니다.