html - Use anchors and :target for navigation. How to show first layer by default -

i'm trying use anchors , css navigation.

if user clicked on menu link, anchor target section should displayed, others should hidden.

here layout i'm using:

    <nav>       <ul>         <li><a href="#page1">page #1</a></li>         <li><a href="#page2">page #2</a></li>         <li><a href="#page3">page #3</a></li>       </ul>     </nav>     <div>       <section id="page1">         <h2>page #1</h2>       </section>       <section id="page2">         <h2>page #2</h2>       </section>       <section id="page3">         <h2>page #3</h2>       </section>     </div> 

here css i'm using:

    section:not(:target) {       display: none;     }     section:target {       display: block;     } 

everything works perfect, how show first page default?

you can set first page display:block; , position absolutelty lowwer z-index other pages.

this way, displayed default , can display other ones on :target pseudo selector.

demo

css :

#page1 {     display:block;     position:absolute;     top:76px;     z-index:1 } section:not(:target) {     display: none; } section:target {     display: block;     background-color: #fff;     position:relative;     z-index:2; }