将引导按钮链接到网页的问题答案

【问题标题】：Problems linking a bootstrap button to a webpage将引导按钮链接到网页的问题
【发布时间】：2017-09-24 00:03:19
【问题描述】：

我正在尝试将按钮链接到网页。这是我拥有的代码，但是当我单击按钮时它不会指向该页面。

<button class="btn2 btn-primary btn-lg dropdown-toggle"type="button" id="WebPast" data-toggle="dropdown"
<a href= "HomePage.html">    
  Home Page ▼ </a>
</button>

【问题讨论】：

标签： javascript jquery twitter-bootstrap button

【解决方案1】：

你打错了，你在button标签末尾缺少>：

<button class="btn2 btn-primary btn-lg dropdown-toggle".....toggle="dropdown">
_____________________________________________________________________________^

希望这会有所帮助。

<button class="btn2 btn-primary btn-lg dropdown-toggle" type="button" id="WebPast" data-toggle="dropdown">
<a href= "HomePage.html">    
Home Page ▼ </a>
</button>

【讨论】：

【解决方案2】：

您的问题不与<button> 上的拼写错误有关。我已经测试了你的代码，它确实不起作用。实际上，您的按钮包装了您的链接，因此当您单击按钮时，不会在您的 <a> 元素上触发默认单击事件。如果你想保持这个 HTML 结构，你可以使用 JavaScript 让它工作：

document.getElementById('WebPast').addEventListener('click', handler, true);

function handler(e) {
  location.href = e.target.children[0].href;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<body>
  <button class="btn2 btn-primary btn-lg dropdown-toggle" type="button" id="WebPast" data-toggle="dropdown">
    <a href="http://stackoverflow.com">Home Page ▼</a>
  </button>
</body>
</html>

【讨论】：

【解决方案3】：

按钮不是链接

您可以只使用<a> 代替

<a href="HomePage.html" class="btn2 btn-primary btn-lg dropdown-toggle" id="WebPast" data-toggle="dropdown">Home Page ▼</a>

同样有效:)

【讨论】：

【解决方案4】：

可能是因为忘记关闭按钮标签

<button class="btn2 btn-primary btn-lg dropdown-toggle"type="button" id="WebPast" data-toggle="dropdown" <!-- ?? Where is your ">" ??-->

试试这个：

<button class="btn2 btn-primary btn-lg dropdown-toggle"type="button" id="WebPast" data-toggle="dropdown">
      <a href= "HomePage.html">Home Page</a>
</button>

【讨论】：