根据单击的按钮更改文本内容

Question

我是这方面的初学者，但我的 objective 是让我的网页的 header 发生变化，这取决于在另一个页面上单击了什么按钮。

更准确地说，我有一个网页，上面有 7 个按钮，代码如下：

<form action="contribution.html">
    <input type="submit" style="margin-right: 80px;margin-top: 25px;" value="I contribute">
</form>

所有按钮都指向相同的 "contribution.html" 页面，但我希望该页面的 header 根据用户单击的按钮而有所不同。必须有一种方法可以做到这一点，而无需为每个按钮创建 7 个不同的 "contribution.html" 页面……我假设。

有人能帮忙吗？

Answer 1

使用javascript 是最简单的解决方案。如果你花一点时间学习 jQuery，你可以使用这样的东西：

// A reference to your "header" element
var header = $('.header');

// When the submit button is clicked
$('[type=submit]').click(function(){
  // Update the header with the button's text
  header.text( $(this).value() );
});

虽然我建议为您希望它起作用的按钮使用更具体的选择器，但 [type-submit] 太通用了，但我使用它是因为您这样做了。

Answer 2

根据您的应用程序，如果您想对 SEO 友好，您应该查看此答案 How to dynamically change a web page's title?

Answer 3

当您提交表单时，服务器会收到包含已单击按钮的 HTTP post 请求。拥有该请求服务器端可以生成 <title> 元素的正确内容。浏览器会将 <title> 中的文本呈现为 tab/page 的标题。

因此您的服务器上需要 PHP 之类的东西。在这种情况下，您可以有单个 contribution.php 文件（但不是静态 html）。

Answer 4

使用服务器端语言和 <a> 标签代替表单。在 PHP 中，它看起来像这样：

<a href="/contribution.php?sum=10">10$</a>
<a href="/contribution.php?sum=20">20$</a>
<a href="/contribution.php?sum=30">30$</a>

等等

然后在 contribution.php 你可以从 $_GET['sum'] 获取请求数据并采取相应的行动。

根据单击的按钮更改文本内容

Changing text content depending on button clicked

html

server-side