CSS – 使用锚名称显示/隐藏内容

前端之家收集整理的这篇文章主要介绍了CSS – 使用锚名称显示/隐藏内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
单页网站

我有一个单页网站(仅限一页).我可以使用菜单导航以使用锚名称访问页面的不同部分,就像(参见侧栏):

WordPress Docs

隐藏其他东西

我想隐藏不属于当前活动页面部分的内容,只显示我正在查看的部分的信息.

问题(S)

>我可以用CSS只隐藏不属于当前#anchor_part的东西吗?
>你见过任何网站已经这样做了吗?

解决方法

Working Example

试试这个Html

<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>

和Css

#a,#b,#c{
    display:none;
}
#a:target{
    display:block;
}
#b:target{
    display:block;
}
#c:target{
    display:block;
}

猜你在找的CSS相关文章