JS CSS 链接创建哈希链接 - Javascript

在网页开发中，经常需要创建一个哈希链接，可以通过JS和CSS的链接来实现。哈希链接即在网页链接后面添加“#”号和一段字符，点击链接后会自动跳转到页面相应位置。

JS创建哈希链接

1. window.location.hash

window.location.hash属性可以获取当前页面的哈希值，并且可以修改它来创建新的哈希链接。

<script>
  function createLink() {
    var link = document.createElement('a');
    link.href = '#example';
    link.innerText = 'Example Link';
    document.body.appendChild(link);
  }
  createLink();
</script>

以上代码会在页面中创建一个链接，点击该链接会跳转到页面上id为“example”的元素。

2. href="#example"

另一种创建哈希链接的方式是直接在href属性中添加哈希值。

<a href="#example">Example Link</a>

以上代码会在页面中创建一个链接，点击该链接也会跳转到页面上id为“example”的元素。

CSS创建哈希链接

要为CSS创建哈希链接，需要使用a标签的伪类来实现。

<style>
a:target {
  background-color: yellow;
}
</style>

<a href="#example">Example Link</a>
<div id="example">This is an example</div>

以上代码会在点击链接后将id为“example”的元素背景色设为黄色，实现了哈希链接的效果。

以上就是JS和CSS创建哈希链接的介绍。在网页开发中，使用哈希链接可以方便地跳转到页面上的指定元素，提高用户体验。