Trick: Switch the target implementation tab, tricktarget

Trick: Switch the target implementation tab, tricktarget
: What is target?

MDN is described as follows: 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 the document, you can set the anchor link to give a su Zi:

<a href="#tab">Test :target</a><a href="#tab2">Test 2:target</a><div id="tab">This is a tab.</div><div id="tab2">This is another tab.</div>

There are two anchor links above: # tab and t # ab2. When you click the anchor link, it will jump to the corresponding div. Then: target is used for these divs. Add CSS

:target{    color:red;}#tab:target::after{    content:"tab1"}

Click the anchor link. The text of the div corresponding to the link turns red. In addition, insert a text to the # tab. (Ps: usage of content attributes: Detailed description of content attributes in CSS3)
Dashboard: https://jsfiddle.net/dwqs/cL8rawov/
You should have understood the meaning of target. If you do not know how to use it, read this article: Using the: target selector.

: What can target do?

The simplest use: Use: target to implement Tab switching.
HTML:

<div class="tab-control">    <a href="#tab1">tab1</a>    <a href="#tab2">tab2</a>    <a href="#tab3">tab3</a></div><div class="tabs">    <div id="tab1" class="tab">This is a tab1</div>    <div id="tab2" class="tab">This is a tab2</div>    <div id="tab3" class="tab">This is a tab3</div></div>

CSS:

.tab-control a{    display:inline-block;    text-decoration:none;    color:#FFF;    height:20px;    width:40px;    text-align:center;    line-height:20px;    background:rgba(70,121,189,0.75);}.tab-control a:hover{    background:rgba(70,121,189,1);}.tabs{    position:relative;    border:1px solid red;    height:200px;    width:135px;    overflow:hidden;}.tab{    height:100%;    width:100%;}:target{    display:block;}

Look at the effect: Demo
Of course, the target function is not limited to this. Hide elements and create lightbox. Many demos are provided on the MDN: more demo.
You can also open your mind, haha.

Browser support

For: target pseudo-classes, browser support is still good.

Specific timestamp: target

Link: http://www.ido321.com/1567.html