현재 앵커를 기반으로하는 요소의 스타일이 다릅니다

Question

내 index.html에는 앵커로 작동하는 3 개의 링크가 있습니다. 또한 고정 된 위치의 div 요소가 있습니다.

<a href="#1">1</a> 
<a href="#2">2</a> 
<a href="#3">3</a> 

<div></div> 

나는 현재 HREF에 따라 div 요소를 사용자 정의 할 수 있습니다 어떻게

? "id"와 "target"을 사용하면 두 개의 hrefs 만 수행 할 수 있습니다. 예 : 첫 번째 페이지에서 요소는 빨간색이었고 두 번째 페이지에서는 초록색이되었고 세 번째 페이지에서는 파란색으로 바뀌 었습니다. 이것이 가능한가?

Answer 1

예 가능합니다. onhashchange 이벤트를 경청하면 요구 사항에 맞게 DOM을 변경할 수 있습니다. 지금까지 노력이 무엇

window.onhashchange = function() { 
 
    var el = document.getElementById('bar'); 
 
    switch (window.location.hash) { 
 
    case '#1': 
 
     el.className = 'red'; 
 
     break; 
 
    case '#2': 
 
     el.className = 'green'; 
 
     break; 
 
    case '#3': 
 
     el.className = 'blue'; 
 
     break; 
 
    } 
 
}

#bar { 
 
    width: 100vw; 
 
    height: 10vh; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
}

<a href="#1">1</a> 
 
<a href="#2">2</a> 
 
<a href="#3">3</a> 
 

 
<div id="bar"></div>