CODEWITHSUNDEEP
javascriptjqueryhtmlanchor
codey
codey

Reputation: 25

How to make an Anchor tag change the content of the page its linked to via JavaScript?

working on a personal project and got stuck and thought why not give stackoverflow a try

What I'm trying to do is have many links to all link to the same page with different content depending on what link(id) they clicked on i cant seem to figure it out >.<

<html>
<header>
<title></title>
</header>
<body>
<a href="somejavascript">Link1</a>
<a href="somejavascript">Link2</a>
<a href="somejavascript">Link3</a>
<a href="somejavascript">Link4</a>
<body>
</html>

Then once clicked then it goes to a page with the same header and footer but different content e.g. a video tag

<html>
<header>
<title></title>
</header>
<body>
<video id="58315bfa" class="sublime" width="640" height="360" data-player-
kit="2" data-uid="1234" preload="none"><source src="WebIntroduction.avi /></video>
<body>
</html>

doesn't necessarily have to stay on the first page which is the first code it can go to another page but once on the other page all the other links need to go to that page with different content. So for example if i am on index page with the links and i click link 1 i got to a list.html page with a video. and if i where to go back to index and click link2 it would go to list.html again but with different content i hope i made it clear please help!!!! thanks

Upvotes: 0

Views: 1293

Answers (2)

sideroxylon
sideroxylon

Reputation: 4416

On the first page:

<a href = "/list.html?v=1">Link 1</a>
<a href = "/list.html?v=2">Link 2</a>
<a href = "/list.html?v=3">Link 3</a>
//...etc.

Then at list.html:

var contentID;
s = location.search;
        if(s != '') {
            var split = s.split('=');
            contentID = split[1];
        }

You now have a global variable (contentID) on list.htmlthat you can use to select which content to display.

Upvotes: 0

Prathik Rajendran M
Prathik Rajendran M

Reputation: 1162

There are many ways to do this, one would be to pass an id in the url and show content based on that.

<html>
<header>
<title></title>
</header>
<body>
<a href="contentpage?id=1">Link1</a>
<a href="contentpage?id=2">Link2</a>
<a href="contentpage?id=3">Link3</a>
<a href="contentpage?id=4">Link4</a>
<body>
</html>

Content page would look for the id which is the GET variable and then print the content depending on what the id is.

Another thing you could do is use ajax.

<html>
<header>
<title></title>
</header>
<body>
<a href="contentpage?id=1">Link1</a>
<a href="contentpage?id=2">Link2</a>
<a href="contentpage?id=3">Link3</a>
<a href="contentpage?id=4">Link4</a>
<script src="jquery.js"></script>
<body>
</html>

On click of a link you could make a ajax request to get the content JSON, pass it to a template engine such as handlebars or moustache and then inject it into the body.

The third way you could go about this is to use a framework such as angularjs.

Upvotes: 1

Related Questions