使用多个HTML页面或使用javascript显示/隐藏div

Question

First of all, I have a background in C (++), Java, MATLAB and Python, mainly used for scientific and electronic applications (Math operation on data, reading data from sensors, microcontrollers). But i'm relatively new to both HTML (CSS) and Javascript. For both I've read some books. In HTML books, multiple pages are done by links (<a></a>) .

In javascript (which feels a lot more natural to me than HTML), I've seen some examples where there is only 1 html page, full of divs, who are shown and hiden each time a certain page needs to be shown. This is done with the Jquery command $('#div1').hide() and $('#div2').show();

Now my question is, what is the best practice? When is it better to have multiple HTML pages, and when is it better to have just hide/show divs with Javascript?

Thanks

Answer 1

Not Every one Can Use Javascript. Not Every Computer Or Browser Has The Basics Of Java Installed. But Every Computer Can Read HTML every Browswer Can Read HTML. To identify If a visitor is using java.

How to check whether Java plugins are installed or not in a browser using Code .?

Java is mostly installed now days with the browser some basic functions. But older navigator or IE browsers dont always have it installed by default.

More Info Here also

How can I detect the Java runtime installed on a client from an ASP .NET website?

The easiest is using <ul><li> css navigation themes. Check this site out for more info.

https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/

Answer 2

When you have multiple html pages and user clicks on links, then on each click a new web page has to be fetched from server and then rendered.

Whereas when you do it in java script the same web page will be altered, so there are no additional requests to the server. And this will be much faster than loading a new web page.

But remember the initial loading time is second approach is longer but its negligible.

Answer 3

Let me point out that there is no "best practice" to the question that you are asking. It is entirely up to the team if they want to push all the content in one page or keep them separately.

If in case you have a content that requires decent amount of images to be loaded, or contents that you are sure will rarely be seen, you might want to keep them in separate pages so as to make the page load faster.

If you have heavy contents which requires a lot of interaction with javascript/jQuery then you certainly might want to keep them in separate pages so that later when you want to debug/add to the code it can be easily done.

The vice versa of the above holds true as well. If in case you just have small content, or simple text content then you can easily do it in a single page.

Answer 4

Maybe you should use a tab component ? bootstrap wraps one very nicely:

http://getbootstrap.com/javascript/

Maybe thats the best approach, also take a look at angular.js routes in specific, it should do what ever you are looking for.