显示部分/ div取决于链接中的哈希号值 [英] Show section/div depends on after hash # value in link
本文介绍了显示部分/ div取决于链接中的哈希号值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下页面
section {
height: 1000px;
background: yellow;
margin: 50px;
}
<section id="one">Section one</section>
<section id="two">Section two</section>
如果用户来自包含哈希后的节ID的链接,则使用html / css仅显示一个节是可能的,例如
It is possible using html/css only to show only ONE section if user came from link which contains section id after hash e.g
- 如果用户转到链接 http:// my-site / page#one 如果用户转到链接 http,则他应该只能看到第一部分
- :// my-site / page#two 他只能看到第二部分
- 如果用户转到链接 http:// my-site / page 他应该看到所有部分
- if user go to link http://my-site/page#one he should only see section one
- if user go to link http://my-site/page#two he should only see section two
- if user go to link http://my-site/page he should see all sections
?
推荐答案
我的解决方案不包含HTML嵌套并且可以轻松缩放。它使用:target
和通用同级组合器查找匹配项并仅显示目标部分
。
My solution contains no HTML nesting and scales easily. It uses :target
and general sibling combinator to find matches and show only the targeted section
.
/* Display all sections initially */
section {
height: 1000px;
background: yellow;
margin: 50px;
}
/* Hide all targeted sections initially */
span:target ~ section {
display: none;
}
/* Display only the targeted section */
span:nth-of-type(1):target ~ section:nth-of-type(1),
span:nth-of-type(2):target ~ section:nth-of-type(2),
span:nth-of-type(3):target ~ section:nth-of-type(3),
span:nth-of-type(4):target ~ section:nth-of-type(4),
span:nth-of-type(5):target ~ section:nth-of-type(5) {
display: block;
}
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<a href="#four">four</a>
<a href="#five">five</a>
<!-- <a href="#n">n</a> -->
<span id="one"></span>
<span id="two"></span>
<span id="three"></span>
<span id="four"></span>
<span id="five"></span>
<!-- <span id="n"></span> -->
<section>Section one</section>
<section>Section two</section>
<section>Section three</section>
<section>Section four</section>
<section>Section five</section>
<!-- <section>Section n</section> -->
这篇关于显示部分/ div取决于链接中的哈希号值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文