So I'm constructing a induction-type webpage, I'm using a template which someone has already previously built in order to see how it fits my needs Essentially, it includes a dynamic page switcher that uses previous and next buttons to swap out the body content without having to load another entire page. EXAMPLE: https://css-tricks.com/examples/DynamicPage/
Upon clicking a hyperlink inside the main content, the body will show the correct content from the external pages. However, if I click either of the navigation links up top ("Home >> Inductions >>") the link is not opened as a new page, but instead I think ajax attempts to load that page inside the ajax-body section.
Specifically in the codepen, this is the navbar I'm mentioning which I do NOT want ajax to work on. I've tried multiple fixes but finally throwing my hands in the air.
<nav id="location"><a href="index.html">Home</a> >> <a href="induction.html">Inductions</a> >> Vehicle 1</nav>
What I am aiming to build is attempt something like this: https://css-tricks.com/examples/DynamicPage/ This is the creator showing how its made, if I am unable to describe it as well as I should: https://css-tricks.com/dynamic-page-replacing-content/
I made a codepen the best I could, without being able to upload the other 2 pages which ajax will load the bodies from - https://codepen.io/dylan-mclean-the-vuer/pen/XWbONyP Just imagine that clicking the 'prev' or 'next' will load a body inside the contained from external HTML docs. I couldn't figure out how to use multiple HTML files. I still need to make a proper prev/next in JS somehow still, just will take some time! Currently, prev just links to one HTML doc and next links to another.
Keep in mind I'm still at the diploma-grad coding level, so I'm sorry if I'm missing an obvious solution, or if its too messy to understand!