Ways to implement tab switching using CSS3

: What is Target?

MDN is described in this way: target

The:target Pseudo-class represents the unique element, if any, with an ID matching the fragment identifier of the URI of The document.

In document, you can set up anchor chains, for example:

CSS code copy content to clipboard

1. <a href= "#tab" >Test:target</a>
2. <a href= "#tab2" >test 2:target</a>
3. <div id= "tab" >this is a tab.</div>
4. <div id= "TaB2" >this is another tab.</div>

There are two anchor chain connection: #tab和t #ab2. When you click on the anchor link, you will jump to the corresponding DIV:: Target is for these div. Add CSS

CSS code copy content to clipboard

1. : target{
2. color:red;
3. }
4. #tab: target::after{
5. Content: "Tab1"
6. }

Click on the anchor link, the text of the corresponding Div is changed to red, in addition, insert a text behind the #tab.

Effect jab: https://jsfiddle.net/dwqs/cL8rawov/
It should be understood roughly: Target's meaning.

: What can target do

The simplest use: Target implementation tab switching.
Html:

xml/html code to copy content to clipboard

1. <div class= "Tab-control" >
2. <a href= "#tab1" >tab1</a>
3. <a href= "#tab2" >tab2</a>
4. <a href= "#tab3" >tab3</a>
5. </div>
6. <div class= "Tabs" >
7. <div id= "tab1" class= "tab" >this is a tab1</div>
8. <div id= "tab2" class= "tab" >this is a tab2</div>
9. <div id= "tab3" class= "tab" >this is a tab3</div>
10. </div>

Css:

CSS code copy content to clipboard

1. . Tab-control a{
2. Display:inline-block;
3. Text-decoration:none;
4. Color: #FFF;
5. height:20px;
6. width:40px;
7. Text-align:center;
8. line-height:20px;
9. Background:rgba (70,121,189,0.75);
10. }
11. . Tab-control a:hover{
12. Background:rgba (70,121,189,1);
13. }
14. . tabs{
15. position:relative;
16. border:1px solid red;
17. height:200px;
18. width:135px;
19. Overflow:hidden;
20. }
21. . tab{
22. height:100%;
23. width:100%;
24. }
25. : target{
26. Display:block;
27. }

Look at the effect: Demo
Of course: Target's functionality is not limited to this. Hide elements, create lightbox, and so on. MDN gave a lot of Demo:more demo.
You can also open the brain hole, haha.
Browser support

For: Target pseudo class, browser support is still good.