HTML中的嵌套文本链接 [英] Nested text links in HTML

问题描述

在HTML中，不允许使用嵌套链接.但是，出于我的目的(文本注释有时指的是整个句子，有时只指已注释的句子中的一个单词)，我需要它们.因此，我必须找到一种解决此问题的方法.

但是，我现在所拥有的只是关于它的外观和行为的基本概念.下面的模型显示了两个链接:一个链接到目标A，一个链接到B.链接的外部"是，下面的一行.A是外部链接，因此，它的线比B的线低.单击链接的线应始终指向该链接的目标-即使该行上方的文本是内部链接的文本./p>

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

任何想法，我如何借助CSS(也许还有SVG)在HTML中实现.我希望没有脚本的解决方案，但任何建议都欢迎.

解决方案

使用JavaScript可获得最佳效果

我知道:

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

但是...

欢迎提出任何建议.

您可以向子 span 的子级添加内联 onclick 处理程序:

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

或者，要进行干燥处理，请改为传递对处理程序的引用:

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

处理程序的定义:

 功能embedLink(url){event.preventDefault();window.location.assign(url);返回false；} 

工作示例:

  a {显示:inline-block;文字修饰:无；颜色:蓝色；边框底部:1像素的纯蓝色；填充:1px；}.annotation {颜色:紫红色；边框底部:1px双紫红色；背景颜色:白色；}a:悬停{背景颜色:浅蓝色；}.annotation:hover {背景色:lightpink；}  

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

---

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

• 在新窗口中打开.使用: window.open()而不是 window.location.assign().
• 复制到剪贴板.将事件侦听器添加到父链接上的 context 和 copy 事件中.在处理程序中，使用 document.execCommand('copy')来从单击的子范围中获取URL；也许其URL存储在 data-href 属性中.
• 在状态栏中显示URL .添加一个 mouseover 事件监听器.在处理程序中，设置 window.status = url .

In HTML nested links are not permitted. However, for my purpose (text notes which sometimes refer to whole sentences and sometimes to just one single word within already anotated sentences) I need them. So I have to find a way to solve this problem.

However, all I have now is a basic idea on how it should look and behave. The following mock up shows two links: one to target A, one to B. The "outer" a link is, the lower is the line under it. A is the outer link, thus, its line is lower than that of B. Clicking on the lines of a link should always lead to the target of that link - even if the text above that line is the text of an inner link.

I've tried to show that intended behaviour with hover colors: Blue for A, pink for B.

Any ideas how I could realize this in HTML with the help of CSS (and maybe SVG?). I'd prefer solutions without scripting, but any suggestions are welcomed.

解决方案

Use JavaScript for best results

I know:

I'd prefer solutions without scripting,

but…

any suggestions are welcomed.

You can add an inline onclick handler to a child span:

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

Or, to be DRY, pass in a reference to the handler instead:

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

Definition of handler:

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

Working example:

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;
}

<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>

---

With JS, you can handle other possibilities as well:

• Open in new window. Use: window.open() instead of window.location.assign().
• Copy to clipboard. Add an event listener to the context and copy events on the parent link. In the handler, use document.execCommand('copy') to grab the url from the clicked child span instead; perhaps its URL is stored in a data-href attribute.
• Display URL in status bar. Add a mouseover event listener. In the handler, set window.status = url.

这篇关于HTML中的嵌套文本链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！