通过链接保持价值变化

Posted 2023-02-22

【中文标题】通过链接保持价值变化

【英文标题】：Keeping value changes through links

【发布时间】：2021-02-26 05:46:19

【问题描述】：

对于学校作业，我必须创建一个页面，该页面会根据点击的链接而变化。 更清楚地说，我从一个带有不同链接的页面开始，无论我点击什么链接都会将它带到同一个 html 页面，但它的内容必须根据点击的 javascript 链接而改变。

我认为最简单的方法是在点击时获取点击链接的 id，并且根据它，页面内容会改变，但我无法通过页面改变来保持这个值。

你有什么想法吗？ （顺便说一句，我被授权为这个项目寻求帮助）。

【问题讨论】：

我们谈论的是单页应用程序吗？您可以使用 url 的哈希部分来确定要显示的内容。

听起来您可能需要history API。但是请再澄清一下要求，因为如果它只是一个简单的根据url不同的内容，那么根本不需要使用history api

【参考方案1】：

这样的事情应该可以帮助您入门。

function myFunc(e)
  e.preventDefault();
  let aa = event.target.innerText;
  console.log(aa)
  const msg = document.getElementById('msg');
  msg.innerText = 'Hello: ' + aa;
  msg.classList.add('wow');

.wow
  width: 90%;
  padding: 20px 50px;
  margin-top: 20px;
  font-size: 3rem;
  color: firebrick;
  background: wheat;
  border:1px solid orange;

<a href="bob" onclick="myFunc(event)">Bob</a>
<a href="sam" onclick="myFunc(event)">Sam</a>
<div id="msg"></div>

【讨论】：

这似乎是我需要的，但它会在页面更改时起作用吗？我的意思是，这里的“Bob”和“Sam”链接在我的情况下是href，所以新页面的加载可能会重置所有这些没有？

【参考方案2】：

一个使用 HTML 和 CSS 的基本示例，根据 hash 显示页面的不同部分。

.page 
    display: none;


.page:target 
    display: block;

<a href="#page1">Show Page 1</a><br>
<a href="#page2">Show Page 2</a><br>


<div class="page" id="page1">
<h2>Content 1</h2>
</div>

<div class="page" id="page2">
<h2>Content 2</h2>
</div>

还有一个使用hashchange 事件的基本示例。

addEventListener("hashchange", function(event) 
  console.log("Show Content for", location.hash);
);

<a href="#page1">Show Page 1</a><br>
<a href="#page2">Show Page 2</a><br>

【讨论】：

当我使用它时，当我们更改页面时，控制台中不会显示任何内容。这就是我尽量避免的

@Jo_Byr 第一个 sn-p 是一个示例，您可以在没有 JS 的情况下完全实现它。第二个示例当前记录哈希更改。在那里你可以用一些可以更新页面的代码替换console.log。

【参考方案3】：

我误解了你的问题。请忽略我的第一个答案 - 但我会将其留在那里供您参考。

您要查找的内容称为查询字符串（有时称为获取字符串）。查询字符串以以下格式附加到 url：

https://example.com?varname=varvalue&nuthervar=different value

所以，你可以像这样配置你的锚标签：

<a href="next_page_to_view.html?name=bob">Bob</a>
<a href="next_page_to_view.html?name=sam">Sam</a>

在另一个页面上，在这个例子中是next_page_to_view.html，你可以有类似的代码：

let qs = window.location.search;
const urlParams = new URLSearchParams(qs);
const name = urlParams.get('name')
if (name === 'bob')
   alert('hi bob');

使用我在第一个不正确的答案中提供的 javascript 示例将用户特定的消息放入 div（而不是 alert() 消息）。

参考：

https://www.sitepoint.com/get-url-parameters-with-javascript/

Is there any method to get the URL without query string?

【讨论】：

对不起，但这不是我需要的。我需要一个可模块化的 html 页面。而你的提议依赖于 2。我真的只需要一个，因为页面上有 12 个链接，所以我无法创建几乎相同的 12 个页面。

我的第一个答案假设您正在更新包含链接的同一页面。此答案假定所有链接都导航到第二个页面，并且您希望根据单击的链接中的查询字符串以不同的方式更新该第二个页面。也许您不明白第二个答案如何允许您根据单击的链接更新next_page_to_view.html？否则，请进一步解释以帮助我理解。

因此，使用此解决方案我只能编写一个 html 文档，而导航器中的结果可能会有所不同？很抱歉无法理解，我用 HTML、CSS 和 JS 编码只有 2 个月，而且我不是英语，所以很难理解你答案的每一个细节。

您的问题需要两页，对吗？在第一页，有几个链接。所有链接都将用户（“导航”）发送到第二页 - 但第二页上显示的内容取决于单击的链接。您可以使用上面的代码来实现这一点，因为每个<a> 链接都有一个稍微不同的href="" 属性，使用查询字符串。在第二页，您可以通过window.location.search 阅读此内容。您可以使用URLSearchParams() 解析查询字符串。您可以“获取”查询字符串的所需部分，如上所示。 Meilleurs voeux 与您的项目