現在のアンカーに基づく要素の異なるスタイル

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"を使用すると、私はこれを2つのHFSだけで実行できます。たとえば、最初のページでは要素が赤で、2番目のページでは緑になり、3番目のページでは青になりました。これは可能ですか？

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>