Question

我正在做以下事情：

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>

这很好但我得到一个HTML5验证错误，说“元素'按钮'不能嵌套在元素'按钮'中。

有人可以就我应该做什么给我建议吗？

Answer 1

否，根据HTML5 Spec Document from W3C，它无效HTML5：

内容模型： Transparent，但必须没有interactive content后代。

只要内部没有交互式内容（例如按钮或其他链接），a元素可以包裹整个段落，列表，表格等，甚至整个部分。

换句话说，除了以下内容之外，您可以将任何元素嵌套在<a>中：

<a>
<audio>（如果控件属性存在）
<button>
<details>
<embed>
<iframe>
<img>（如果 usemap 属性存在）
<input>（如果类型属性不在隐藏状态中）
<keygen>
<label>
<menu>（如果类型属性位于工具栏状态）
<object>（如果 usemap 属性存在）
<select>
<textarea>
<video>（如果控件属性存在）

如果您尝试使用链接到某处的按钮，请将该按钮包含在<form>标记内：

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

但是，如果您的<button>标记使用CSS设置样式并且看起来不像系统的小部件...帮自己一个忙，为<a>标记创建一个新类并将其设置为样式同样的方式。

Answer 2

如果您使用的是 Bootstrap 3 ，则效果非常好

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Answer 3

我刚刚跳到同样的问题，我解决了它将'button'标签替换为'span'标签。在我的情况下，我正在使用bootstrap。这就是它的样子：

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a>

Answer 4

没有

以下解决方案依赖于JavaScript。

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

如果要将按钮放在具有<form>的现有method="post"内，请确保按钮具有属性type="button"，否则该按钮将提交POST操作。通过这种方式，您可以拥有一个包含GET和POST操作按钮混合的<form>。

Answer 5

如果这是有效的，那将是非常奇怪的，我希望它是无效的。在另一个可点击元素中有一个可点击元素应该是什么意思？它是什么 - 按钮或链接？

Answer 6

另一个选择是使用按钮的onclick属性：

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

但是，如果它位于元素内部，用户将看不到悬停时显示的链接。

Answer 7

现在，即使规范不允许，“似乎”仍然可以将按钮嵌入<a href...><button ...></a>标签中，FWIW ...

Answer 8

您可以在按钮中添加一个类，并将一些脚本重定向到它。

我是这样做的：

<ion-view view-title="News">
  <ion-content class="padding">
    Hello world!
  </ion-content>
</ion-view>

Answer 9

为什么不..你也可以在按钮上嵌入图片

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM>

Answer 10

这里的解释和工作解决方案： Howto: div with onclick inside another div with onclick javascript

在内部点击处理程序中执行此脚本：

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

Answer 11

在HTML5中将链接元素嵌入链接中是违法的。

最好在默认情况下使用CSS :(活动（按下）状态：

＆＃13;

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

＆＃13;

<p><a class="Button" href="www.stackoverflow.com">Click me<a>

＆＃13;

Answer 12

我尝试使用javascript解决方案但是，为了工作，我需要在我的javascript函数中插入e.preventDefault();。

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>

Answer 13

在按钮

中使用formction属性

PS！它仅适用于您的按钮类型=“提交”

<button type="submit" formaction="www.youraddress.com">Submit</button>

Answer 14

＆＃13;

<a href="index.html">
  <button type="button">Submit</button>
</a>

＆＃13;

＆＃13; 或者您可以在按钮中使用java脚本：

＆＃13;

<button type="submit" onclick="myFunction()">Submit</button>
<script>
  function myFunction() {
      var w = window.open(file:///E:/Aditya%20panchal/index.html);
    }
</script>

＆＃13;

我可以在<a> using HTML5?</a> </button>中嵌套<button>元素

14 个答案: