javascript - 如何使 anchor 标记通过 JavaScript 更改其链接到的页面的内容?

标签 javascript jquery html anchor

从事个人项目并陷入困境,并想为什么不尝试一下 stackoverflow

我想做的是有很多链接指向同一页面的所有链接,内容不同,具体取决于他们点击的链接(id),我似乎无法弄清楚>。<

<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,我会进入带有视频的 list.html 页面。如果我返回索引并单击 link2,它将再次转到 list.html,但内容不同,我希望我说清楚,请帮助!谢谢

最佳答案

有很多方法可以做到这一点,其中一种是在 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>

单击链接时,您可以发出 ajax 请求来获取内容 JSON,将其传递给模板引擎(例如 Handlebars 或 mustache ),然后将其注入(inject)正文中。

第三种方法是使用诸如 angularjs 之类的框架。

关于javascript - 如何使 anchor 标记通过 JavaScript 更改其链接到的页面的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28915093/

相关文章:

android - 具有捕获和接受属性的 HTML 文件输入控件工作错误?

jquery - 如何阻止 jQuery 树项目中的 Ajax.ActionLink 将点击传播到树项目

Javascript:时间和信息拆分

javascript - 使用 JavaScript 向文档动态添加 Doctype

javascript不会从数组生成

javascript - 如何确定用户正在与 Slick Carousel 中的哪个轮播进行交互?

javascript - jQuery ajax请求和html只显示一次数据

html - Bootstrap 中等高和等宽的盒子?

html - Ipad 屏幕分辨率和桌面版本

javascript - D3.js 转换多行 - 数据不更新