如何使锚标记更改通过 JavaScript 链接到的页面的内容？

Question

在做个人项目时卡住了，想着为什么不试试 Whosebug

我想做的是根据 link(id) 他们点击的内容，将许多 link 发送到同一页面的所有 link 内容不同似乎无法弄清楚 >.<

<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>

然后一旦点击它就会转到页眉和页脚相同但内容不同的页面，例如一个视频标签

<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>

不一定要停留在第一页，这是它可以转到另一个页面的第一个代码，但是一旦在另一个页面上，所有其他 links 都需要以不同的方式转到该页面内容。因此，例如，如果我在带有 link 的索引页面上，然后单击 link 1，我会进入带有视频的 list.html 页面。如果我在哪里返回索引并单击 link2，它会再次转到 list.html 但内容不同我希望我说清楚了请帮忙！！！！谢谢

Answer 1

有很多方法可以做到这一点，一种是在 url 中传递一个 ID 并显示基于该 ID 的内容。

<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>

内容页面会寻找 GET 变量的 id，然后根据 id 打印内容。

您可以做的另一件事是使用 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>

单击 link 后，您可以发出 ajax 请求以获取内容 JSON，将其传递给模板引擎，例如 handlebars 或 mustache，然后将其注入body.

解决此问题的第三种方法是使用框架，例如 angularjs。

Answer 2

第一页：

<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.

然后在 list.html:

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

您现在在 list.html 上有一个全局变量 (contentID)，您可以使用它来 select 要显示的内容。

如何使锚标记更改通过 JavaScript 链接到的页面的内容？

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

html

javascript

anchor

jquery