时间戳

首页 > 解决方案 > 如何使用javascript触发“：target” CSS样式？

javascript - 如何使用javascript触发“：target” CSS样式？

问题描述

当你跟随一个像 的锚链接<a href="#div">时，它会转到元素 #div 并显示 ":target" 的 CSS 样式，例如：#div:target { color: red }。我想知道如何重现仅在单击锚链接（哈希）时才会出现的此功能。

整个想法是我想自定义处理一个锚链接，这样它就不会在popstate每次单击时触发事件（on）。它触发它对我来说非常有问题。

因此，如果我使用“scrollIntoView”或 Jquery 中的等效项手动重新编码，将其条目添加到历史记录（不会触发“popstate”）然后编码的最后一件事是触发“:target”伪类样式.

怎么做？

谢谢你

标签： javascriptcss

解决方案

那么没有办法使用:target伪类并在不影响历史的情况下更改位置，

所以像这样的东西应该适合你。基本上data-在链接上设置属性指向应该定位的位置并为样式添加一个类

[...document.querySelectorAll('a')].forEach(a => a.addEventListener('click', _ => {
  const targeted = document.querySelector(`[data-targetted="${a.dataset.target}"]`);

  if (!targeted) return;
  [...document.querySelectorAll('[data-targetted]')].forEach(elem => elem.classList.remove('target'))
  targeted.classList.add('target');
  targeted.scrollIntoView({ behavior: 'smooth' })
}));
div {
  height: 30vh;
}

div.target {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-family: sans-serif;
  color: white;
  background-color: green;
}
<a data-target="link1">Link 1</a>
<a data-target="link2">Link 2</a>
<a data-target="link3">Link 3</a>
<a data-target="link4">Link 4</a>
<a data-target="link5">Link 5</a>

<br/><br/>

<div data-targetted="link1">Link 1 Target</div>
<div data-targetted="link2">Link 2 Target</div>
<div data-targetted="link3">Link 3 Target</div>
<div data-targetted="link4">Link 4 Target</div>
<div data-targetted="link5">Link 5 Target</div>

推荐阅读