HTML中的嵌套文本鏈接

Question

在HTML中，不允許嵌套鏈接。 然而，為了我的目的（文本注釋有時指的是整個句子，有時只是在已經分配的句子中只有一個單詞）我需要它們。 所以我必須找到解決這個問題的方法。

但是，我現在所擁有的只是它應該如何看待和表現的基本概念。 下面的模擬顯示了兩個鏈接：一個到目標A，一個到B.“外部”是一個鏈接，下面是它下面的行。 A是外部鏈接，因此，它的行低於B的行。單擊鏈接的行應始終指向該鏈接的目標 - 即使該行上方的文本是內部鏈接的文本。

我試圖用懸停顏色顯示預期的行為：藍色代表A，粉紅色代表B代表。

任何想法如何在CSS的幫助下（也許是SVG？）在HTML中實現這一點。 我更喜歡沒有腳本的解決方案，但歡迎任何建議。

Answer 1

您可以在<span>的內部鏈接中使用：

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

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

一個小問題或額外的工作是，你需要JavaScript來讓他們按照鏈接。

但正如您所問，您可以在沒有任何腳本的情況下獲得UI效果，但以下鏈接，肯定需要編寫腳本！

Answer 2

擴展@connexo的答案，你可以將它們全部包裝在一個范圍內並在其上使用border-bottom。

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

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

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獲得最佳效果

我知道：

我更喜歡沒有腳本的解決方案，

但…

歡迎任何建議 。

您可以向子span添加內聯onclick處理程序：

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

工作范例：

 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> 

---

使用JS，您還可以處理其他可能性：

• 在新窗口中打開 。 使用： window.open()而不是window.location.assign() 。
• 復制到剪貼板 。 向context添加事件偵聽器並在父鏈接上copy事件。 在處理程序中，使用document.execCommand('copy')從被點擊的子跨度中獲取URL; 也許它的URL存儲在data-href屬性中。
• 在狀態欄中顯示URL 。 添加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> 

仍然存在一個問題：如果一個相當長的文本鏈接被分成線，只有第二個（或最后一個是精確的）線被加下划線。