Multiple pages same CSS/JS file but different URL

Question

I'm making a website with different pages; let's say:

Home
About me
Contact

All those pages have the same structure

<div id="PageWrapper"> <header id="PageHeader"> <nav id="MainMenu"> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="PageContent"></div> </div>

where in PageContent will be filled by the page content.

Since all those pages have the same structure, I would like to have an Index.html page with the structure and then load all the contents from different html files instead of creating n pages with same structure and copying and past the link to CSS and JS files.

I've tried using function from JQuery in the following way

$('#MainMenu ul li a').click(function(e) { appendPage($(this).attr('href')); e.preventDefault(); }); function appendPage(url){ window.location.hash = url; $.ajax({ url: url }).done(function(data) { $('#PageContent').html(data); }); }

this works but the problem is it doesn't really change the URL of the page. If I save the url and I would like to go directly to Contact page, it will reload the page from the Home

window.location.hash returns the #foo part of the page URI. You'll need to strip the hash and append something like .html and ensure that you're fetching from the correct path where your page content will be. — Bren
– Bren, Commented Jul 8, 2020 at 20:43

Bren · Accepted Answer · 2020-07-08 22:00:14Z

Just make a folder called pages and ensure all your links follow the same name as your file names.

So you'd have a pages directory with home.html, about.html, etc.

<div id="PageWrapper"> <header id="PageHeader"> <nav id="MainMenu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <div id="PageContent"></div> </div>

$('#MainMenu ul li a').click(function(e) { e.preventDefault(); insertContent($(this).attr('href')); }); function insertContent(pageHref){ pageHref = pageHref.replace('#', ''); $.ajax({ url: `pages/${pageHref}.html`, }).done(function(data) { $('#PageContent').html(data); }); } // Initialize content based on window location hash window.onload = insertContent(location.hash);

Open up your developer console and see if it's failing to fetch the resource. In which case you'll need to ensure the path is correct.
No, it loads the right page but it doesn't change my URL so I cannot save on my library list About page
If you want to dynamically change the url like how you're describing, you need to use history.pushState
Ok, if I use history.pushState it works but the problem is, if I copy the URL and paste it in a new windows, it only opens my HTML without keeping the Javascript or CSS because they are linked only in the index.html
Understandably so. Ideally you could use a hash code instead. Then on page load you just load whatever the hash is.

Collectives™ on Stack Overflow

Multiple pages same CSS/JS file but different URL

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related