如何将 <a> 链接放在 <a> 中的 <span> 中？答案

【问题标题】：How to put a <a> link inside a <span> that is in a <a>?如何将 <a> 链接放在 <a> 中的 <span> 中？
【发布时间】：2011-09-04 23:37:55
【问题描述】：

这是我的代码

  <a href="http://linkurl" class="link" title="sometitle">
 text link 

 <span class="hidden-tooltip-data" style="display: none;"> <a
 href="http://www.google.ca"> my link here destroy everything </a 
</span>
  </a>

我在这里使用 Poshy 脚本

       $('.link').each(function() {
      var tooltip = $(".hidden-tooltip-data",this).html();
      $(this).attr("title","");
    $(this).poshytip({
    content: function(updateCallback) {
        return tooltip;
             }
         });
      });

【问题讨论】：

无论如何，您都不应该将<a> 放在另一个<a> 中。你也没有解释你想要做什么，你只是向我们扔了一堆代码。
这是错误的，你为什么要那样做？
你的问题没有意义....
这个问题确实有道理；即使他想要做的完全不正确。无论如何，向他解释原因是一个很好的答案。
嗯，问题很清楚，不知道为什么有人给了-1。

标签： jquery hyperlink href html

【解决方案1】：

嵌套链接是非法的。这个案例在the HTML 4.01 Specification中明确提到。

【讨论】：

【解决方案2】：

首先你不应该那样做。原因在于子 a 被完全忽略，因为它在父 a 之下。

我建议您只创建一个 span，其中包含两个不同的 a 标签，其中包含所需数量的 span。

【讨论】：

【解决方案3】：

您不应将链接放在另一个链接中。

【讨论】：

【解决方案4】：

默认情况下，Poshytip 将读取元素的title 属性并将其用作工具提示内容。但是，您想在提示中包含一个链接，如果 JavaScript 被关闭（并且无法访问），那么将 HTML 放入 title 会看起来很丑陋。

您最好的方法是为低级浏览器包含纯文本title，并在data 属性中包含增强的提示内容（显然是转义标记）：

<a href="..." class="link" title="basic content" data-tip="enhanced content &lt;a href=&quot;...&quot;&gt;link&lt;/a&gt;">...</a>

$('.link').each(function() {
    $(this).attr('title','').poshytip({ content: $(this).data('tip') });
});

在这样的属性中包含标记显然会有点混乱，因此如果您的提示具有通用格式，最好将 URL 包含为 data 属性并在脚本中构建标记。

$('.link').each(function() {
    $(this).attr('title','').poshytip({ content: '<a href="' + $(this).data('tiplink') + '">link</a>' });
});

【讨论】：