html – 显示sectiondiv取决于链接中的hash#值之后

概述我有以下页面 section { height: 1000px; background: yellow; margin: 50px;} <section id="one">Section one</section><section id="two">Section two</section> 如果用户来自包含散列之后的节ID的链接,则仅使用html / css可以仅显示一个节 >如果用户 我有以下页面

section { height: 1000px; background: yellow; margin: 50px;}

<section ID="one">Section one</section><section ID="two">Section two</section>

如果用户来自包含散列之后的节ID的链接,则仅使用HTML / CSS可以仅显示一个节

>如果用户转到链接http://my-site/page#one,他应该只看到第一部分
>如果用户转到链接http://my-site/page#two,他应该只看到第二部分
>如果用户转到链接@L_502_2@,他应该看到所有部分

？

解决方法 我的解决方案不包含HTML嵌套并且可以轻松扩展.它使用：target和 general sibling combinator来查找匹配项并仅显示目标部分.

/* 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> -->

总结

以上是内存溢出为你收集整理的html – 显示section / div取决于链接中的hash#值之后全部内容，希望文章能够帮你解决html – 显示section / div取决于链接中的hash#值之后所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。