html - 基于当前 anchor 的元素的不同样式

Question

在我的 index.html 中，我有 3 个用作 anchor 的链接。我还有一个固定位置的 div 元素。

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

<div></div>

如何根据当前href自定义div元素？使用“id”和“target”，我可以只对两个 href 执行此操作。例如:在第一页上元素是红色的，在第二页上它变成绿色，在第三页上它变成蓝色。这可能吗？

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>