blank on refreshed webpage

Question

I have a webpage

sample.html

and when I click something

it goes

sample.html#bro

and when I refresh(f5) it

it still sample.html#bro and shows its content

how can I remove the #bro

with just refreshing any idea?

btw this is the code i use

<a href="#div1">Div one</a>
<a href="#div2">Div two</a>
<a href="#div3">Div three</a>
<a href="#div4">Div four</a>

<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>

the css is

#content > div {
display: none;
}

#content > div:target {
display: block;
}

any thoughts on when refreshed the content will reset or blank

Answer 1

I think You need two things. You can try this.

1. Event when page is getting unload

Intercept page exit event

2. Inside this event remove the hash and reload the page

How to remove the hash from window.location with JavaScript without page refresh?

But there is a problem, I am not sure what will happen when you want to move to another page from this page. I think then also your page will get refreshed.