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
<style type="text/css"> .tabmenu{ position:absolute; top:-28px; left:144px; margin:0px; } .tabmenu li{ display:inline-block; } .tabmenu li a{ display:block; padding:5px 10px; margin:0 10px 0 0; border:1px solid #91a7b4; border-radius:5px 5px 0 0; background-color:#e3f1f8; color:#333; text-decoration: none; font-size:16px; } .tablist{ position:relative; top:200px; margin:0 auto; width:600px; min-height:200px; } .tab_content{ position:absolute; width:600px; height:170px; padding:15px; border:1px solid #91a7b4; border-radius:10px; box-shadow:0 2px 3px rgba(0,0,0,0,1); font-size:16px; line-height:16px; color:#666; background-color:#fff; } #tab1:target,#tab2:target,#tab3:target{ z-index:1; } </style> <p class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <p id="tab1" class="tab_content">tab1</p> <p id="tab2" class="tab_content">tab2</p> <p id="tab3" class="tab_content">tab3</p> </p>
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.

On the Microsoft Edge team, we’re committed to an open web and helping to drive innovation forward, which is why we’ve kicked off a new initiative in

What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you’re able to read

In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank

For the last six years, Vue, Angular, and React have run the world of front-end component frameworks. Google and Facebook have their own sponsored frameworks,

Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about

The developer’s debugging console has been available in one form or another in web browsers for many years. Starting out as a means for errors to be reported

Back in 2011, the domain name for this site, css-tricks.com, was stolen. "Domain Hijacking," they call it. It wasn't just this site, but around 12 others in

If you have a limited-width container, say a centered column of text, "breaking out" of that to make a full-width element involves trickery. Perhaps the best


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver Mac version
Visual web development tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

WebStorm Mac version
Useful JavaScript development tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Mac version
God-level code editing software (SublimeText3)