html - 在 html/css 中隐藏嵌套的锚点

Question

我有以下代码：

<a id="outer-anchor" href="/test">
    text in anchor
    <a id="inner-anchor" href="/test2" style="display:none"></a>
</a>

我在不同的浏览器中尝试过这个，并且每个浏览器中的内锚都从外锚中退出。所以它被渲染成这样：

<a id="outer-anchor" href="/test">
    text in anchor
</a>            
<a id="inner-anchor" href="/test2" style="display:none"></a>

有人知道为什么以及如何解决这个问题吗？

提前致谢

Answer 1

您不能在锚标签内放置锚标签。

这会将 childNode 移出outer-anchor成为它的兄弟节点，然后很好地隐藏它；

JSfiddle

HTML

<div id="parent-placeholder">
    <a id="outer-anchor" href="/test">
        text in anchor
        <a id="inner-anchor" href="/test2" style="display:none"></a>
    </a>
</div>

JavaScript

var outer = document.getElementById('outer-anchor');
var inner = outer.nextSibling;

inner.style.display = 'none';

inner.parentNode.removeChild(inner);
outer.parentNode.appendChild(inner);

输出

<div id="parent-placeholder">
    <a id="outer-anchor" href="/test">text in anchor</a>
    <a id="inner-anchor" href="/test2" style="display: none;"></a>
</div>

parent-placeholderdiv 纯粹是为了显示如何与锚点所在的父 DOM 元素相关联。