There is a menu:

<a href="#link1">div1</a> <a href="#link2">div2</a> <a href="#link3">div3</a>

There are, respectively, 3 div 's of the same size, but with different content.
How to implement the change of these blocks by clicking on the links? By shift, I mean hiding two unnecessary and displaying one, necessary block (by the reference div1, change the value of display blocks 2 and 3 to none, and block 1 to table, for example).

Thank.

  • What do you mean by changing blocks? One becomes visible the other is not? It would be even better if you describe the problem more fully and post more code. - Streletz

1 answer 1

The answer is here .

As an option:

 #tab2, #tab3 {position: fixed; } .menu1 > a, .menu1 #tab2:target ~ a:nth-of-type(1), .menu1 #tab3:target ~ a:nth-of-type(1), .menu1 > div { padding: 5px; border: 1px solid #aaa; } .menu1 > a { line-height: 28px; background: #fff; text-decoration: none; } #tab2, #tab3, .menu1 > div, .menu1 #tab2:target ~ div:nth-of-type(1), .menu1 #tab3:target ~ div:nth-of-type(1) {display: none; } .menu1 > div:nth-of-type(1), .menu1 #tab2:target ~ div:nth-of-type(2), .menu1 #tab3:target ~ div:nth-of-type(3) { display: block; } .menu1 > a:nth-of-type(1), .menu1 #tab2:target ~ a:nth-of-type(2), .menu1 #tab3:target ~ a:nth-of-type(3) { border-bottom: 2px solid #fff; } 
 <div class="menu1"> <br id="tab2"/><br id="tab3"/> <a href="#tab1">div1</a> <a href="#tab2">div2</a> <a href="#tab3">div3</a> <div>вкладка 1</div> <div>вкладка 2</div> <div>вкладка 3</div> </div>