I am using javascript to dynamically load page content on my webpage.
I have a number of links, but they do not have href attributes. When the user clicks a link, they have a data-content attribute which is used as a key to load new content dynamically from a JSON file.
My links look something like this:
<a data-content="about">About</a>
This works perfectly well.
I know from a UX perspective, users may want to right click a link and load it into a new tab. This current way of doing things does not permit this behaviour.
One way around this would be to move the data-content attribute to the href attribute and add a # before. For example:
<a href="#about">About</a>
Right clicking on this link and loading in a new tab would open the URL
<a href="mysite.com/my-current-page#about">About</a>
I could then use javascript to look for # in the URL and use the string after it as a key to find the content to load on the page.
When I make this change though - javascript no longer loads my new content.
So what are some ways of dynamically loading content onto a page whilst preserving the functionality of 'open in new tab