html - 使用 href 的 CSS 标签

Question

在学校我们还有大约 5 分钟的时间，所以我决定继续 W3Schools 的随机教程。并找到了 CSS 选项卡教程。它是这样的:

span {display: none;}
span:active {display: block;}

基本上，当:<a href="#menu1">被点击，它会显示:block href 含义中的元素，将显示菜单 1。它的制作方式是您可以通过添加新的#id 然后添加 div 来轻松添加新的。使用该 ID，无需在 CSS 中进行任何更改。 CSS 也大约有 10-20 行。有人知道吗？我非常需要它。没有涉及 JavaScript、JQuery 或类似的东西。

Answer 1

我不确定我是否理解你的问题，但这听起来很适合我的目标技术。使用 CSS3 可以使用 :target 参数。有了它，您可以在通过 anchor 选择它们时添加一个 css 状态。

这是一个非常简单的例子，背后的技巧是什么。

#contents div {
    border: 1px black dotted;
    display: none; //hides all div elements
}

#contents div:target {
    display: block; //shows the selected div (target)
}

<div id="tabs">
    <div id="menu">
        <a href="#content1">Menu 1</a>
        <a href="#content2">Menu 2</a>
        <a href="#content3">Menu 3</a>
        <a href="#content4">Menu 4</a>
    </div>
    <div id="contents">
        <div id="content1">Suspendisse potenti. Mauris in lacinia.</div>
        <div id="content2">Pellentesque pulvinar venenatis ante in.</div>
        <div id="content3">Vestibulum a nisi viverra, hendrerit.</div>
        <div id="content4">Nullam leo ipsum, euismod sed.</div>
    </div>
</div>