HTML包含带有相对链接的导航元素

Question

I included a navigation element in multiple pages like this: <script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script> <script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>

But this works just for html-files in the same directory "subdir". The navigation.html cannot be reached from the index.html in the upper main directory "dir". If I add the upper pattern to the index.html in the directory above the navigation.html is reached correctly but the relative links do not work anymore. I don't want to replace the relative links by absolute paths. Is it possible to switch between different links in navigation.html depending on wherefrom it is called? Any other ideas? Thanks a lot!

Answer 1

Since this is a multiple page website that reuses the same menu on all its pages, there's no functional or logical difference between page1.html and index.html apart from index probably being the first page you see. So I would just put index.html in the same folder and call it a day. It would make sense to have it on an upper level if the index page would load all the other pages into itself. Then the menu would only need to be included on the index page.

A folder structure is a project requirement, not a technical requirement. In development, all pages are likewise divided into sub directories and such to organize the files. But with running the deployment script to copy everything into production, the deploy script concatenates everything into one file anyway and the entire folder structure disappear.

It's perfectly normal to have a clear folder structure for development organised by business needs and also have a completely different folder structure for live code organised by technical needs.

Answer 2

you have to give the path of navigation.html file.

$(function(){ $("#includedNavigation").load("./dir/navigation.html"); });

like this

Answer 3

Can you use something like this

<link rel="import" href="navigation.html">

Or

$(function(){ $("#includedNavigation").load("path/to/navigation.html"); });