href内的href [重复]答案

【问题标题】：href inside href [duplicate]href内的href [重复]
【发布时间】：2017-02-03 21:12:20
【问题描述】：

我有一个可点击的面板，其中有一个工具提示。代码如下：

<a href="/venues/manage/">
 <div class="col-md-4">
    <div class="panel panel-default">
     <img src="/img/venue.svg">
     <h5 class="text-vert crop"><b>Venue Title</b><a href="#" data-toggle="tooltip" title="Verified Venue">Verified</a></h5>
    </div>
 </div>
</a>
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

当我将鼠标悬停在工具提示文本上时，它可以正常工作。工具提示的某些内容与主链接<a href="/venues/manage/"> 混淆。当我单击图像时，链接工作正常。当我单击文本 Venue Title 时，它工作正常。但是，如果我单击<div class="col-md-4"> 中的其他任何位置（例如文本右侧），则链接将不起作用。

是否可以在另一个 <a> 中包含 <a> 工具提示？

【问题讨论】：

没有。您不能嵌套 <a>s 和嵌套 <p>s。
你错了@MuhammadUsman，请稍等……我的回答
不要确定自己.... 等一下....，请看一下，将您的第二个 'a' 包裹在对象标签中。
@pbenard 是的，我今天看到了一种可能性......我以前从未使用过object。

标签： html twitter-bootstrap tooltip

【解决方案1】：

为了嵌套 a 请进行以下更改 ....

您必须将嵌套的 a 包裹在 object 标记内。

<a href="/venues/manage/">
 <div class="col-md-4">
    <div class="panel panel-default">
     <img src="/img/venue.svg">
     <h5 class="text-vert crop">
         <b>Venue Title</b>
         <object><a href="#" data-toggle="tooltip" title="Verified Venue">Verified</a></object>
     </h5>
    </div>
 </div>
</a>

这是一个 bootply（查看生成的 HTML）：http://www.bootply.com/MmYwCLTF0P

这是来自 Vitaly Friedman 的会议：https://vimeo.com/162334949

【讨论】：

工作就像一个魅力。谢谢！
嵌套的<a> 元素是无效的 HTML
@j08691 我同意你的看法。这是一个糟糕的 hack……但它确实完成了工作……
这是什么魔法。