Question

我希望将一个带有标签的部分集成到我的页面中，并在纯CSS3中找到了一个很好的教程http://t3n.de/news/css3-dynamische-tabs-ohne-365861/

HTML的基本结构如下所示：

<article class="infobox">
<section id="allgemeines">
    <h2><a href="#allgemeines">Allgemeines</a></h2>
    <p>Hier stehen ganz allgemeine Informationen.</p>
</section>
<section id="funktionen">
    <h2><a href="#funktionen">Funktionen</a></h2>
    <p>Hier stehen Informationen zu den Funktionen</p>
</section>
<section id="preise">
    <h2><a href="#preise">Preise</a></h2>
    <p>Hier stehen Informationen zu den Preisen.</p>
</section>

我刚刚复制了代码并更改了整个内容的位置以适合我的页面。

现在，h2s中的链接显示为选项卡，然后单击它们会显示相应的部分。

我的问题：现在这将跳转到某种方式，以便h2元素将显示在视野之外（上图）。我正在寻找一种方法来抵消它，这样我就会跳到略高的位置。

到目前为止，我找到了实现这种插入跨度的方法，并将跨度向上移动并跳转到那个。但是我不能应用这种策略，因为我想跳到文章中的一个部分，而不是一些内联元素。

如果不使用JavaScript而是纯CSS，为块，绝对定位元素实现偏移量的方法是什么？

Answer 1

纯CSS解决方案：

这是我的Fiddle

编辑：我将您的孩子改为n-of-type。这对解决方案来说没有必要！

我添加了一种防止页面跳转的方法。见HTML：

<span class="targetFix" id="allgemeines"></span>

CSS：

.targetFix {
    position: fixed;
    top: 0;
    left: 0;
}

Answer 2

纯CSS解决方案：
我开发了类似的标签，长按单选按钮。点击单选按钮不会产生跳跃效果。

在 codepen

上找到我的示例

缺点：需要更多样机

Answer 3

我不确定是否只有CSS解决方案，但您可以添加JS（或jQuery）代码来禁用页面跳转到链接ID：

jQuery示例：

$( "#target" ).click(function( event ) {
    event.preventDefault();
});

参考：http://api.jquery.com/event.preventdefault/

JS示例：

以下是一些提案：javascript:void(0) or onclick="return false" for <a> - which is better?

在纯CSS选项卡菜单中偏移锚点

3 个答案: