Page switching

I'm switching pages by switching between

display:none

display:none

and

display:block

display:block

.
How can i stay on the active page even if I refresh?

Can I know what is the best practice for production, please?

https://codepen.io/ahad4387/pen/rNvEPoG

CodePenahad4387

Navigation

...

b1mind•10/20/22, 6:02 PM

You say page but you're making tabs. Honestly if you want pages use the native api and make multiple pages.

Abdul Ahad⚡OP•10/20/22, 6:04 PM

sorry about that.
Is it good practice to use pages or tabs?

b1mind•10/20/22, 6:04 PM

Pages

b1mind•10/20/22, 6:04 PM

Pages for pages

Abdul Ahad⚡OP•10/20/22, 6:05 PM

like,nav bar is repeated in every page.
so I was like, it would be great if all content is loaded at once and i have to shift the tabs only

Abdul Ahad⚡OP•10/20/22, 6:06 PM

i'm building photo gallery so, loading will take time if i choose pages

b1mind•10/20/22, 6:06 PM

Then you can check the url for state too and use the active class, though I recommend using aria-current

b1mind•10/20/22, 6:07 PM

https://benmyers.dev/blog/semantic-selectors/

Ben Myers

Style with Stateful, Semantic Selectors

See how building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free.

Bb1mind Then you can check the url for state too and use the active class, though I reco...

Abdul Ahad⚡OP•10/20/22, 6:07 PM

sorry didn't get you, I'm at start of JS actually

b1mind•10/20/22, 6:08 PM

Have you ever built a normal non JS multiple pages site?

b1mind•10/20/22, 6:08 PM

If not, do. simply cause it's how the web works.

b1mind•10/20/22, 6:10 PM

https://developer.mozilla.org/en-US/docs/Web/API/URL

URL - Web APIs | MDN

The URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.

Abdul Ahad⚡OP•10/20/22, 6:10 PM

Yeah, I was building only single-page landing pages till now with only HTML and CSS

okay, that's what I needed to understand.

Abdul Ahad⚡OP•10/20/22, 6:11 PM

thank you mate

Chris Bolson•10/20/22, 7:36 PM

If you really want to go with tabs (though as @b1mind has mentioned pages would probably be better) you could try setting a cookie with the "page" id. Then , if the page is refreshed, you check to see if the cookie has been set and then showing the desired contents.
However this will probably cause the contents in "page" 1 to flash before the JS code kicks in unless hide all the tab contents until you have checked the cookie (defaulting to "page" 1 of not set).