Example of tab switching using pure CSS3

Let’s take a look at the renderings first

##CSS3 pseudo-class targetUse the characteristics of target , you can achieve pure CSS tab effect switching

The sample code is as follows

   
    

        

            
tab1
            
tab2
            
tab3
        
        
tab1
        
tab2
        
tab3
    

The most critical code

#tab1:target,#tab2:target,#tab3:target{
    z-index:1;
}

First anchor link to the corresponding p according to the characteristics of the target, and then change the hierarchical relationship of p according to the attributes of z-index , thereby achieving the tab switching effect!

target compatibilityFinally, let me mention the compatibility issue: Because this is a new feature of CSS3, it is not compatible with older versions of browsers, such as IE678.

SummaryThe above is the entire content of this article. I hope it can bring some help to everyone's study or work. If you have any questions, you can leave a message to communicate.