我可以使用HTML5在<a>内嵌套<button>元素吗？

如何解决我可以使用HTML5在<a>内嵌套<button>元素吗？

| 我正在执行以下操作：

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

这很好用，但是我收到一个HTML5验证错误，提示“元素“按钮”不得嵌套在元素“按钮”中。谁能给我建议我该怎么做？

解决方法

不，根据W3C的HTML5规范文档，它不是有效的HTML5：内容模型：透明，但必须没有交互式内容后代。只要其中没有交互内容（例如按钮或其他链接），该a元素就可以包裹在整个段落，列表，表格等，甚至整个节中。换句话说，您可以在nest1ѭ内嵌套任何元素，但以下内容除外： <a> <audio>（如果存在controls属性） <button> <details> <embed> <iframe> <img>（如果存在usemap属性） <input>（如果type属性未处于隐藏状态） <keygen> <label> <menu>（如果type属性处于工具栏状态） <object>（如果存在usemap属性） <select> <textarea> <video>（如果存在controls属性）如果您要使某个按钮链接到某处，请将该按钮包装在<form>标记内，如下所示：

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

但是，如果您的<button>标签是使用CSS设置样式的，并且看起来不像系统的小部件...帮个忙，请为您的<a>标签创建一个新类，并以相同的方式对其进行样式设置。 , 如果您使用的是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>

, 我刚刚遇到了同样的问题，我用\'button \'标记替换为\'span \'标记解决了它。就我而言，我正在使用引导程序。它是这样的：

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

, 没有。以下解决方案依赖JavaScript。

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

如果将按钮放置在具有ѭ25an的现有<form>内，则确保该按钮具有属性type=\"button\"，否则该按钮将提交POST操作。这样，您可以拥有一个<form>，其中包含GET和POST操作按钮的混合。 , 如果那是真的，那将是很奇怪的，我希望它是无效的。在另一个可点击元素中包含一个可点击元素意味着什么？是哪个按钮或链接？ , 另一个选择是使用按钮的onclick属性：

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

此方法有效，但是，用户将不会看到悬停时显示的链接，就像链接在元素内一样。 , 如今，即使规范不允许，“似乎”仍可以将按钮嵌入a29ѭ标签（FWIW）中。 , 您可以将一个类添加到按钮，并添加一些脚本来重定向它。我这样做：

<button class=\'buttonClass\'>button name</button>

<script>
$(\".buttonClass\').click(function(){
window.location.href = \"http://stackoverflow.com\";
});
</script>

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

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

, 这里的解释和解决方案： Howto：带有onclick的div内的另一个div与onclick的javascript 通过在内部点击处理程序中执行以下脚本：

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

, 在HTML5中将按钮元素嵌入链接是非法的。最好在默认和：active（按下）状态下使用CSS：

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}

<p><a class=\"Button\" href=\"www.stackoverflow.com\">Click me<a>, 我尝试了您的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>

, 在按钮内使用formaction属性 PS！仅当您的按钮类型=“提交”时才有效

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

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

我可以使用HTML5在<a>内嵌套<button>元素吗？

如何解决我可以使用HTML5在<a>内嵌套<button>元素吗？

解决方法

相关推荐