HTML -如何让按钮打开不同的链接，但使一个通用关闭按钮_如何在HTML中关闭一个按钮，使折叠的文本不与/按钮的数据重叠_如何让按钮链接到Rails中的另一个html页面？ - 腾讯云开发者社区

HTML -如何让按钮打开不同的链接，但使一个通用关闭按钮

HTML是一种用于创建网页的标记语言。要实现让按钮打开不同的链接，但使用一个通用关闭按钮，可以通过以下方式实现：

使用JavaScript：可以通过JavaScript编写一个函数，根据不同的按钮点击事件来动态改变链接地址。首先，在HTML中给按钮添加一个唯一的标识符（例如id或class），然后使用JavaScript获取按钮元素，并为其添加点击事件监听器。在点击事件处理函数中，根据按钮的标识符来判断应该打开哪个链接，然后使用window.open()方法打开相应的链接。对于通用关闭按钮，可以使用相同的点击事件处理函数，但在其中使用window.close()方法关闭当前窗口。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <script>
    function openLink(buttonId) {
      if (buttonId === 'link1') {
        window.open('https://www.example.com/link1');
      } else if (buttonId === 'link2') {
        window.open('https://www.example.com/link2');
      } else if (buttonId === 'link3') {
        window.open('https://www.example.com/link3');
      }
    }

    function closeWindow() {
      window.close();
    }
  </script>
</head>
<body>
  <button id="link1" onclick="openLink(this.id)">Link 1</button>
  <button id="link2" onclick="openLink(this.id)">Link 2</button>
  <button id="link3" onclick="openLink(this.id)">Link 3</button>
  <button onclick="closeWindow()">Close</button>
</body>
</html>

在上面的示例中，我们为每个按钮添加了一个唯一的id，并在点击事件处理函数中根据按钮的id来判断应该打开哪个链接。通用关闭按钮没有id，所以在点击事件处理函数中直接调用了关闭窗口的方法。

使用表单和隐藏字段：另一种方法是使用表单和隐藏字段来实现。在HTML中创建一个表单，其中包含一个隐藏字段用于存储链接地址。每个按钮都有一个不同的值，当点击按钮时，通过JavaScript将相应的链接地址存储到隐藏字段中，然后提交表单以打开链接。对于通用关闭按钮，可以在表单中添加一个额外的按钮，点击该按钮时直接关闭窗口。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <script>
    function setLink(link) {
      document.getElementById('link').value = link;
    }

    function closeWindow() {
      window.close();
    }
  </script>
</head>
<body>
  <form action="" method="get" target="_blank">
    <input type="hidden" id="link" name="link" value="">
    <button onclick="setLink('https://www.example.com/link1')">Link 1</button>
    <button onclick="setLink('https://www.example.com/link2')">Link 2</button>
    <button onclick="setLink('https://www.example.com/link3')">Link 3</button>
    <button onclick="closeWindow()">Close</button>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

在上面的示例中，我们使用一个隐藏字段来存储链接地址，并通过JavaScript的setLink()函数将相应的链接地址存储到隐藏字段中。点击提交按钮时，表单会将隐藏字段的值作为参数传递给服务器，然后服务器返回相应的链接地址，浏览器会打开该链接地址。对于通用关闭按钮，我们直接调用关闭窗口的方法。

这些方法可以根据具体需求进行调整和扩展，以满足不同的功能要求。