div 배경색이 한 번에 하나의 강조 표시된 div로 앞뒤로 변경됩니다.

Question

안녕하세요 각 섹션을 클릭 할 때 배경색이 앞뒤로 전환되는 가로 탐색 막대가 있습니다. 그러나 단 하나의 섹션 만 '활성'으로 보이기를 바랍니다. 즉, 한 번에 하나의 섹션 만 다른 배경색을 가질 수 있습니다. 자바 스크립트

function changeColor(e) { 
var c = e.className; 
e.className = (c == 'color1') ? 'nav' : 'color1'; 
} 

<ul class="nav"> 
    <li><a href="javascript:Tog('1')" onclick="changeColor(this)">Search</a></li> 
    <li><a href="javascript:Tog('2')" onclick="changeColor(this)">Legend</a></li> 
    <li><a href="javascript:Tog('3')" onclick="changeColor(this)">Info</a></li> 
</ul>" 

는 순수 자바 스크립트를 사용하여 도움

Answer 1

주셔서 감사합니다 :

<ul class="nav"> 
     <li><a href="#1" id="link1" onclick="changeColor(this)">Search</a></li> 
     <li><a href="#2" id="link2" onclick="changeColor(this)">Legend</a></li> 
     <li><a href="#3" id="link3" onclick="changeColor(this)">Info</a></li> 
    </ul> 

    <script type="text/javascript"> 
     function changeColor(e) { 
      var arr =e.parentNode.parentNode.querySelectorAll('.color1'); 
      for(var i=0;i<arr.length;i++){ 
       arr[i].className = 'nav'; 
      } 
      var c = e.className;  
      e.className = (c == 'color1') ? 'nav' : 'color1'; 
      checkHashChange(); 
     } 

     var currentPage = 0; 
     function checkHashChange(){ 
      var newPage = window.location.href.substring(window.location.href.length -1 , window.location.href.length); 
      if(currentPage != newPage) { 
       currentPage = newPage; 
       changeColor(document.getElementById('link'+currentPage)); 
      } 
      setTimeout('checkHashChange();', 100); 
     } 
    </script> 
    <style type="text/css"> 
     .color1{ 
     background: #444; 
     } 

     .nav{ 
     background: #eee; 
     } 
    </style>