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

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

本文关键字：链接 JavaScript 何使锚      更新时间：2023-09-26

在个人项目上工作并陷入困境并想为什么不尝试一下Stackoverflow

我

正在尝试做的是有许多指向同一页面的链接，这些链接具有不同的内容，具体取决于他们单击的链接（id），我似乎无法弄清楚>.<</p> 

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

不一定必须停留在第一页上，这是它可以转到另一个页面的第一个代码，但是一旦在另一个页面上，所有其他链接都需要转到具有不同内容的页面。因此，例如，如果我在带有链接的索引页面上，然后单击链接 1，我就会进入一个带有视频的列表.html页面。如果我在哪里返回索引并单击 link2，它会再次转到列表.html但内容不同，我希望我说清楚请帮助!!!谢谢

有很多

方法可以做到这一点，一种是在 url 中传递一个 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>

单击链接后，您可以发出 ajax 请求以获取内容 JSON，将其传递给模板引擎（如车把或胡子），然后将其注入正文。

第三种方法是使用像angularjs这样的框架。

在第一页上：

<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 ），可用于选择要显示的内容。

相关文章：