How to trigger ":target" CSS style with javascript?

Question

When you follow an anchor link like <a href="#div">, it will go to the element #div and display the CSS style for ":target", example: #div:target { color: red }. I would like to know how to reproduce this functionality which occurs only when clicking an anchor link (hash).

The whole idea is that I want to custom handle an anchor link so it doesn't trigger the event (on)popstate each time it's clicked. It's very problematic for me that it triggers it.

So if I recode it manually with "scrollIntoView" or the equivalent in Jquery, add its entry to the history (which won't trigger "popstate") then the last thing to code is to trigger the ":target" pseudo-class style.

How to do so?

thank you

Why is that event problematic for you? If it's only the event that is the problem then be the first to register an handler for this event, using the capture mode and stopImmediatePropogation() the event object. You can keep the default behavior and not let any other script handle it. — Kaiido
– Kaiido, Commented May 1, 2021 at 2:05
@kaiido can you elaborate? i'm not really good with js at all — Barbz_YHOOL
– Barbz_YHOOL, Commented May 1, 2021 at 12:10
Simply answer my first question: "Why is that event problematic for you?" — Kaiido
– Kaiido, Commented May 1, 2021 at 13:12
Loading html with ajax creates problem with anchor links and when i try to solve the problem, it creates a problem with the history (button go back/forward of the browser). If I try to solve the history problem, initial bug rehappens. Normal links have been custom coded (prevent default behaviour), so I tried to do the same thing for anchor links. Prevent default behaviour disables the history event, but then I don't know how to trigger the :target effect :(. — Barbz_YHOOL
– Barbz_YHOOL, Commented May 1, 2021 at 16:24
So the popstate event isn't the problem, but the new history. Please edit your question. — Kaiido
– Kaiido, Commented May 2, 2021 at 0:01

a.mola · Accepted Answer · 2021-05-01 00:41:44Z

1

Well there's no way to use the :target psuedo-class and change the location without affecting the history,

So something like this should work for you. Basically setting data- attributes on the link pointing to where should be targeted and adding a class for the styling

[...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>

edited May 1, 2021 at 0:41

answered May 1, 2021 at 0:07

a.mola

4,0119 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barbz_YHOOL Over a year ago

I just tired and it triggers popstate $(window).on('popstate', function(event) { console.log("ON POPSTATE") } so it means it touches the history

a.mola Over a year ago

Check out my edit, incase its what you're looking for :D

Barbz_YHOOL Over a year ago

so instead of using href, using data-attribute... sure that would work but it's circonvoluted, and if there is no other way, then thank you!

Collectives™ on Stack Overflow

How to trigger ":target" CSS style with javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related