'How to make an href dynamic using Custom Elements

I wanted to make a header with navs (local website) , and the same header will be repeated in all pages. So instead of copy pasting it, i made a custom element in js. The problem is that the hrefs in the main page will be different than the other pages.

This is how it should be in the main page

<a href="pages/somepage.html">

And this is how it should be in other pages who are in the same folder

<a href="somepage.html">

Using a custom element will make them all have the same href.

Is there a solution to this or am i missing something really obvious ? I could just have them all in the same folder but that will get messy the more pages i add.

javascripthtmlhref


Solution 1:[1]

Make your href absolute by putting a / at the front.

eg

<a href="/pages/somepage.html">

Solution 2:[2]

Maybe you make links following:

<a href="/pages/somepage.html">

if you add / to front link browser search the folder.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Antony Thompson
Solution 2 Tayfun Yuksel

Related Questions