search
HomeWeb Front-endCSS TutorialExample of tab switching using pure CSS3

Example of tab switching using pure CSS3

Mar 02, 2017 pm 03:13 PM
css3tabswitch

Let’s take a look at the renderings first

Example of tab switching using pure CSS3

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

The sample code is as follows

The 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

The code is as follows:

#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.


For more examples of tab switching using pure CSS3, please pay attention to the PHP Chinese website!


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Building the Web We WantBuilding the Web We WantApr 11, 2025 am 10:55 AM

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

Understanding Web Accessibility Color Contrast Guidelines and RatiosUnderstanding Web Accessibility Color Contrast Guidelines and RatiosApr 11, 2025 am 10:51 AM

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

Do This to Improve Image Loading on Your WebsiteDo This to Improve Image Loading on Your WebsiteApr 11, 2025 am 10:32 AM

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

Getting Acquainted With Svelte, the New Framework on the BlockGetting Acquainted With Svelte, the New Framework on the BlockApr 11, 2025 am 10:29 AM

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,

Why JavaScript is Eating HTMLWhy JavaScript is Eating HTMLApr 11, 2025 am 10:28 AM

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

Console Commands GuideConsole Commands GuideApr 11, 2025 am 10:14 AM

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

The Case of the Stolen Domain NamesThe Case of the Stolen Domain NamesApr 11, 2025 am 10:12 AM

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

Full-Width Elements By Using Edge-to-Edge GridFull-Width Elements By Using Edge-to-Edge GridApr 11, 2025 am 10:09 AM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)