通过链接保持价值变化

Question

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

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

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

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

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

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