Tabs (pages) on the same page in html / css using: target

Consider one of the options for creating multiple pages or tabs (including nested) on html and css without scripts, lists and tables, on a single html page. Only divas, only hardcore. Suitable for small portfolios and interface elements. Do not be Pinocchio using it everywhere.

The bottom line:







Modern browsers load content only if the block is visible, so crutches for downloading content (pictures) are canceled.

In short: a link to a block makes it visible, while by default they are invisible (so back display: none when we select others); make invisible the first block if _not it_ is selected, since by default it is visible. Actually, that's all. Now implementation.

')

Html We divide the block into 3 pages and one into 3 tabs, for clarity:

<!-- ,    --> <!--     ,    ( - ), ""     --> <div id="tab/one"></div> <div id="tab/two"></div> <div id="tab/three"></div> <div id="tab"> <!--       ,        ,         () --> <a href="#one">#one</a> <a href="#two">#two</a> <!--   ;      ,      -,       css --> <b><a href="#tab/one">#three</a></b> </div> <div id="two"> <a href="#one">#one</a> <b><a href="#two">#two</a></b> <a href="#tab/one">#three</a> </div> <div id="one"> <b><a href="#one">#one</a></b> <a href="#two">#two</a> <a href="#tab/one">#three</a> </div> 

Let us turn to the markup, everything is suddenly very simple (but not obvious) and valid, no non-standard refinements:

 div { display: none; } /*   -  */ div:target { display: block; } /*    */ /*  , ..  ,   */ div[id*=t]:target ~ #one { /*   ,  "t"  ,  #one  */ display: none; } /*       ,     "tab"         -#one */ div[id*=tab]:target ~ #three { /*  ,        */ display: none; } 

You can implement this in different ways, but in my opinion this is the most logical - without distortions in the form of the presentation of links with buttons, lists, scripts and other heresy, the link is a link, and the block is a block.



A live example on codepen