史上最牛逼的纯CSS实现tab选项卡，闪瞎你的狗眼

最新推荐文章于 2025-10-21 09:44:56 发布

翻译最新推荐文章于 2025-10-21 09:44:56 发布 · 1k 阅读

本文介绍了一个使用CSS3实现的外观漂亮且具备淡入淡出效果的Tab菜单，通过HTML和CSS代码展示了如何创建交互式的Tab面板，包括多个面板的内容切换和动画效果。

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

下载地址：http://download.youkuaiyun.com/detail/cometwo/9393614

这里写图片描述

html文件

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>CSS3外观漂亮淡入淡出Tab菜单演示</title>        <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />    </head>    <body>        <div style="text-align:center;clear:both;">            <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>            <script src="/follow.js" type="text/javascript"></script>        </div>        <article class="tabs">            <input checked id="one" name="tabs" type="radio">            <label for="one">Tab One</label>            <input id="two" name="tabs" type="radio" value="Two">            <label for="two">Tab Two</label>            <input id="three" name="tabs" type="radio">            <label for="three">Tab Three</label>            <input id="four" name="tabs" type="radio">            <label for="four">Tab Four</label>            <div class="panels">                <div class="panel">                    <h2>This is Panel One</h2>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>                    <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>                    <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>                </div>                <div class="panel">                    <h2>This is Panel Two</h2>                    <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>                    <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>                </div>                <div class="panel">                    <h2>This is Panel Three</h2>                    <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>                    <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>                </div>                <div class="panel">                    <h2>This is Panel Four</h2>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>                    <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>                </div>            </div>        </article>    </body></html>
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

CSS文件

body {    font-family: Cambria, Arial;    background: #333;}    .tabs {        width: 100%;        max-width: 600px;        border: 1px solid black;        margin: 50px auto;    }        input {            opacity: 1;            }        label {            cursor: pointer;            background: yellow;            color: red;            border-radius: 5px 5px 0 0;            padding: 1.5% 3%;            float: left;            margin-right: 2px;            font: italic 1em cambria;        }            label:hover {                background: blue;            }            input:checked + label {                background: palegreen;                color: blueviolet;            }        .tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,        .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),        .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),        .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {            opacity: 1;            -webkit-transition: .9s;        }        .panels {            float: left;            clear: both;            position: relative;            width: 100%;            background: #fff;            border-radius: 0 10px 10px 10px;            min-height: 315px;        }            .panel {                width: 100%;                opacity: 0;                position: absolute;                background: #fff;                border-radius: 0 10px 10px 10px;                padding: 4%;                box-sizing: border-box;            }                .panel h2 {                    margin: 0;                    font-family: Arial;                }
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow