Question

在HTML中，不允许嵌套链接。然而，为了我的目的（文本注释有时指的是整个句子，有时只是在已经分配的句子中只有一个单词）我需要它们。所以我必须找到解决这个问题的方法。

然而，我现在所拥有的只是它应该如何看待和表现的基本想法。下面的模拟显示了两个链接：一个到目标A，一个到B.“外部”是一个链接，下面是它下面的行。 A是外部链接，因此，它的行低于B的行。单击链接的行应始终指向该链接的目标 - 即使该行上方的文本是内部链接的文本。 / p>

我试图用悬停颜色显示预期的行为：蓝色代表A，粉红色代表B。

Nested test links mockup

我有什么想法可以借助CSS（也许是SVG）在HTML中实现这一点。我更喜欢没有脚本的解决方案，但欢迎任何建议。

Answer 1

您可以在链接中使用<span>：

＆＃13;

a {color: #00f; border-bottom: 1px solid; text-decoration: none;}
a span {color: #66f; text-decoration: underline;}

＆＃13;

<a href="#">Hello, this is link. This is <span>inner link</span> here.</a>

＆＃13;

一个小问题或额外的工作是，你需要JavaScript来让他们按照链接。

但正如你所问，你可以在没有任何脚本的情况下获得UI效果，但是以下链接肯定需要编写脚本！

Answer 2

扩展来自@connexo的答案，你可以将它们全部包裹在一个范围内并在其上使用边框底部。

＆＃13;

.split-link {
    border-bottom:1px solid blue;
    padding-bottom:1px; /* for visual reference only */
}

.split-link a {
    text-decoration: none;
}

.split-link a.inner-link {
    text-decoration: underline;
    text-decoration: red;
    color:red;
}

＆＃13;

<span class="split-link">
    <a href="#outer">Hello, this is a link. It has an </a>
    <a href="#inner" class="inner-link">inner link</a>
    <a href="#outer"> here.</a>
</span>

＆＃13;

Answer 3

您将希望保持有效的HTML，因此您唯一的机会（除了JS）将外部链接分成两个链接。

<a href="#outer">Hello, this is link. This is </a><a href="#inner" class="inner-link">inner link</a><a href="#inner"> here.</a>

.inner-link { color: #66f; text-decoration: underline; }

这会将您示例中的蓝线分成两部分，我假设您不想这样做。但这是不可能的。

Answer 4

使用JavaScript获得最佳结果

我知道：

我更喜欢没有脚本的解决方案，

但是...

欢迎任何建议。

您可以为子onclick添加内联span处理程序：

<a href="#A">AAAA <span onclick="event.preventDefault(); window.location.assign('#B'); return false;">BBBB</span> AAAA</a>

或者，要成为DRY，请传递对处理程序的引用：

<a href="#A">AAAA <span onclick="embedLink('#B');">BBBB</span> AAAA</a>

处理程序的定义：

function embedLink(url) {
    event.preventDefault();
    window.location.assign(url);
    return false;
}

工作示例：

＆＃13;

a {
  display: inline-block;
  text-decoration: none;
  color: blue;
  border-bottom: 1px solid blue;
  padding: 1px;
}
a .annotation {
  color: fuchsia;
  border-bottom: 1px double fuchsia;
  background-color: white;
}
a:hover {
  background-color: lightblue;
}
a .annotation:hover {
  background-color: lightpink;
}

＆＃13;

<a href="#A">AAAA <span data-href="#B" class="annotation" onclick="event.preventDefault(); window.location.assign(this.getAttribute('data-href')); return false;">BBBB</span> AAAA</a>

＆＃13;

使用JS，您还可以处理其他可能性：

在新窗口中打开。使用：window.open()代替window.location.assign()。
复制到剪贴板。向父链接上的context和copy事件添加事件侦听器。在处理程序中，使用document.execCommand('copy')来获取点击的子跨度中的URL;也许它的URL存储在data-href属性中。
在状态栏中显示网址。添加mouseover事件侦听器。在处理程序中，设置window.status = url。

Answer 5

感谢大家的回答！他们都激励了我！

经过一番艰苦的思考并将你的答案合并在一起后，我找到了以下解决方案，其最大的优点是所有链接的基本功能都可以在没有JavaScript的情况下工作。

我的主要想法是将所有链接包装在<span>元素中，并且正如connexo所建议的那样，将这些链接拆分为包含链接的链接。因此，上面示例的HTML框架如下所示：

<span>
 <a>AAA</a>
 <span><a>BBB</a></span>
 <a>AAA</a>
</span>

所有JavaScript仅与<span>相关联。在Onmouseover上，它从所有祖先<span>中删除了悬停类。 Onclick，它需要第一个链接子的url并重定向到那里。

CSS非常简单。它从链接中删除下划线，并定义跨度应该如何（并且在悬停的情况下表现）。

此设计的另一个优点是也支持嵌套的嵌套链接，您可以在下面的代码段中看到。

function link_span_click(current_element,current_event)
{
  current_event.preventDefault();
  current_event.stopPropagation();
  var target_href = current_element.getElementsByTagName('a')[0].href;
  window.location.assign(target_href);
}

function link_span_mouse_over(current_element)
{
  while (current_element)
  {
    current_element.parentNode.classList.remove('link_span_hover'); 
    current_element = current_element.parentNode;
  }
  var target_href = current_element.getElementsByTagName('a')[0].href;
  window.status = target_href;
}

function link_span_mouse_out(current_element)
{
  while (current_element)
  {
    current_element.parentNode.classList.add('link_span_hover'); 
    current_element = current_element.parentNode;
  }
  window.status = '';
}

a.nested_link {
  text-decoration: none;
}       
span.link_span {
  cursor: pointer;
  display: inline-block;
  padding-bottom: 3px;
  background-color: white;
  border-bottom: 1px solid blue;
}
span.link_span_hover:hover {
  background-color: lightblue;
}

<div>
  <span
    class="link_span link_span_hover"
    onclick="link_span_click(this, event)"
    onmouseout="link_span_mouse_out(this)"
    onmouseover="link_span_mouse_over(this)"
    >
    <a href="#a" class="nested_link">AAA</a>
    <span
      class="link_span link_span_hover"
      onclick="link_span_click(this, event)"
      onmouseout="link_span_mouse_out(this)"
      onmouseover="link_span_mouse_over(this)">
      <a href="#b" class="nested_link">BBB</a>
    </span>
    <a href="#a" class="nested_link">AAA</a>
  </span>
</div>
<div>
  <span
    class="link_span link_span_hover"
    onclick="link_span_click(this,event)"
    onmouseout="link_span_mouse_out (this)"
    onmouseover="link_span_mouse_over (this)">
    <a href="#a" class="nested_link">AAA AAA AAA AAA</a>
    <span
      class="link_span link_span_hover"
      onclick="link_span_click(this, event)"
      onmouseout="link_span_mouse_out(this)"
      onmouseover="link_span_mouse_over(this)">
      <a href="#b" class="nested_link">BBB BBB</a>
      <span
        class="link_span link_span_hover"
        onclick="link_span_click(this, event)"
        onmouseout="link_span_mouse_out(this)"
        onmouseover="link_span_mouse_over(this)">
        <a href="#c" class="nested_link">CCC</a>
      </span>
      <a href="#b" class="nested_link">BBB BBB</a>
    </span>
    <a href="#a" class="nested_link">AAA AAA AAA AAA</a>
  </span>
</div>

仍然存在一个问题：如果一个相当长的文本链接分成行，只有第二行（或最后一行是精确的）加下划线。

HTML

5 个答案:

使用JavaScript获得最佳结果