How to cancel :target after page reload?

Question

css

Hello.
When using :target, I encountered a bug:
When the :target event is fired on an element, it remains after the page is reloaded.
An example of a bug could not be implemented on a code pen or fiddle.
CSS looks like this

#el-target01:target ~ a{
  color:red;
}
#el-target02:target ~ a{
  color:green;
}

That is, in fact, with the active section, the color of the link changes.
The bug is that when the page is reloaded, the section remains active.
Cache problem?
Can you please tell me how to fix this bug?
Thank you!

Answer 1

Most likely, when you click on a link, a fragment with a hash gets into the url. And after the reboot, this fragment remains in the url.

Answer 2

You can try this code on page load:
It will discard everything before # on the command line. Should work. In any case, you need to look for a solution through JS. You can dig into the History API. Here is a good article .