표시 내용 DIV의 온 클릭

Question

질문 : 초급 코드 : 순수 자바 스크립트

내가 자바 스크립트 for 루프를 통해 주요 탐색 항목을 렌더링하고있는 웹 페이지를 만들어 낸

. 메인 탐색기 아래에 다른 ID로 각각의 메인 콘텐츠 div가 지정된 일부 콘텐츠가 생성되었습니다.

이제 모든 탐색 항목의 onclick을 원한다면 해당 내용 div를 표시해야합니다. jsfiddle 링크를 찾으십시오 : http://jsfiddle.net/shabirgilkar/GKLJz/1/

나는 순수한 자바 스크립트에서 그렇게하는 방법을 알고 있습니다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

좋아, 나는 당신의 바이올린 업데이트 : http://jsfiddle.net/GKLJz/3/

트릭 당신이 클릭 무엇 accordig CSS 클래스를 전환 onClick 함수를 호출하는 것보다 당신이 당신의 배열에 메뉴 항목에 ID를 할당하고 있다는 것입니다을 .. .

그리고 당신은, 꽤 만들 jQuery를 슬라이드 here

설명처럼 Btw는 당신이 초기화를 ommit 수 있으며, 변경 클래스의 일부 JS 애니메이션 효과를 대신 사용하려는 경우() 함수 entirel y 그냥 다른 divs로 할당

Answer 2

탐색 상자 안의 텍스트가 div.contents의 ID와 일치하면이 코드가 작동합니다. 희망은 내가 도왔습니다.

old="home"; 
     function init() { 
      document.getElementById('about').style.display = 'none'; 
      document.getElementById('products').style.display = 'none'; 
      document.getElementById('services').style.display = 'none'; 
      document.getElementById('career').style.display = 'none'; 
      document.getElementById('faq').style.display = 'none'; 
      document.getElementById('contact').style.display = 'none'; 
     var pages = document.querySelectorAll('a.box'); 
     for(i=0;i<pages.length;i++){ 
      pages[i].onclick=function(e){ 
       document.getElementById(old).style.display='none'; 
       old=e.target.innerHTML.toLowerCase(); 
       document.getElementById(old).style.display='inline-block'; 
       } 
     } 
      }