Display div on click and close display on other click

Question

I want my website to be in one html file so when I click the link of other webpage I want my prev div to get closed and new one to be opened. Can anyone help me. I am a beginner.

Answer 1

Use pseodo element :target with anchor tag href="#target"
https://code.sololearn.com/WgIVsa4sibYG/?ref=app

Answer 2

<a href="#" id="link_a">Home link</a>
<a href="#" id="link_b">Other link</a>
<div id="a">Home page</div>
<div id="b" style="display:none">Other page</div>
<script>
$(document).ready(function (){
$("#link_a").click(function (){
$("#a").show();
$("#b").hide()
})
$("#link_b").click(function (){
$("#b").show();
$("#a").hide()
})
})
</script>

//Don't forget to include jQuery to the page!

Answer 3

Ipang this is single application page (spa), with one single request to get all pages, pages navigation is normally done by JavaScript, in my code, I use css only to navigate the block/hidden of the div blocks.

Answer 4

Calviղ
Please describe what are the pros and cons of single document having multiple sections, and how about the common multiple documents approach.

Answer 5

Ipang from what I see, if we need simple website with less than 10 pages, spa is the best choice, since it request once only all the contents are on the browser page for visitors to navigate freely without requesting data from server again.

However for multi page website like e commerce sites with lots of categories and products, multi page application (mpa) would be a better option.

Spa can easily reuse common section codes like header, sidebar, banner, slider and footer, it's dry approach, whereas mpa html files require to wet it, unless it's parsed from server script codes like php or nodejs.

From SEO point of view, mpa is better than spa since mpa has different files for different pages, it's better for sitemap and search engine ranking.

Most spa controlled by JavaScript, it would not work on browsers with JavaScript disabled, and it's also bad for seo, search engine still cannot crawl JavaScript generated contents well.

Answer 6

Thank you Calviղ ,
And what about project maintenance? is there any difference between an SPA & MPA project? I'm asking this in doubt, will mixing all the contents in one document make editing more difficult? or is it easier? and document size will also be larger with this SPA approach isn't it?

Answer 7

Ipang You are right, single file coding approach is not encouraged and hard to maintain if file getting larger. This is where we need web components and react.js.

You can study next.js which is server side rendering react based web approach to build websites. Developers can build their own web components, form spa page if necessary, or mpa webpages which render from server.

More information, please visit https://nextjs.org/learn/basics/getting-started

Answer 8

Calviղ
Thanks again, then how can we determine when we choose which of these two approaches for web development? is offline viewable document the only reason to go the SPA way?

Please also advise a way to learn react.js and web components development solely using mobile devices (if at all possible).

Answer 9

Calviղ
What are the pros and cons of this approach over the multi page approach? I think it is good to know when to choose one over the other