HTML + CSS: 实现Tab导航栏（一）

前言
代码
Notes
附录

前言

前几天想写个Tab导航栏，在搜索引擎搜到C站一位bz的文章(注¹)。代码虽短小，觉得有些意思，稍微修葺完成一个简单的Tab导航栏。基本原理是使用radio类型的input标签的属性选择器来修改不同状态tab标签的style样式和内容模块的z-index属性，从而实现tab标签的状态转换和内容显示。不得不说，CSS选择器²真的很强大。适当的使用就可以精简很多不必要的代码。当然配合使用Javascript提升用户体验也是不错的选择。为了简化说明，这里没有提及Javascript代码。实际应用中，是有必要使用Javascript来实时更新页面的。

代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyFintitle>
head>
<style type="text/css">
    .tabs{
        position: relative;
        /** note 1 **/
        height: 1918px;
        /** just for test **/
        min-height: 1920px;
        max-height: 1920px;
        clear: both;
        margin: 25px 0;
        /** note 2 **/
        overflow:scroll;
    }
    .tab{
        float: left;
        margin: 25px 0;
    }
    .tab [type=radio]{
        display: none;
    }
    .tab label{
        background: #eee;
        padding: 10px 20px;
        position: relative;
        left: 1px;
        border: 0px solid #ccc;
        margin-left: -1px;
        /** note 3 **/
        z-index: 2;
        color: #333333;
        background: white;
    }
    .content{
        position: absolute;
        /** note4 **/
        top: 61px;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        padding: 20px 20px;
        border: 0px solid #ccc;
    }
    [type=radio]:checked ~ label{
        color: white;
        background: #3288e9;
        border: 0px solid #ccc;
        /** note 5 **/
        z-index: 3;
    }
    [type=radio]:checked ~ label ~ .content{
    	/** note 6 **/
        z-index: 1;
    }
    /**    
    .uploads{
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }
    .uploads img{
        max-with: 100%;
        max-height: 420px;
        display: block;
        margin: 0 auto;
    }
    .uploads li{
        margin: 0 auto;
        max-width: 25%;
        overflow:hidden;
        float: left;
    }
    .uploads li .title{
        padding: 5px;
        margin: 0 auto;
        display: block;
        max-width: 100%;
        text-align: center;
        float: left;
        overflow: hidden;
        text-overflow: hidden;
    }**/
style>
<body>
<div class="tabs">
    <div class="tab">
        <input type="radio" id="tab1" name="group-1" checked>
        <label for="tab1">Indexlabel>
        <div class="content">Welcome!div>
    div>
    <div class="tab">
        <input type="radio" id="tab2" name="group-1">
        <label for="tab2">Newslabel>
        <div class="content">Recent newsdiv>
    div>
    <div class="tab">
        <input type="radio" id="tab3" name="group-1">
        <label for="tab3">Photoslabel>
        <div class="content">Photo gallerydiv>
    div>
    <div class="tab">
        <input type="radio" id="tab4" name="group-1">
        <label for="tab4">Movieslabel>
        <div class="content">Hot moviesdiv>
    div>
    <div class="tab">
        <input type="radio" id="tab5" name="group-1">
        <label for="tab5">Uploadslabel>
        <div class="content">
            Uploaded files
        div>
    div>
div>
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

html+css: 实现Tab导航栏

Notes

note 1

统一固定Tab标签页面最大高度，是为了防止一些长页面拼接式出现在短页面下面。

note 2

overflow属性设置为scroll，完整展示超出note 1的固定高度的长页面。

note 3 note 5 note 6

note 3 、note 5和note 6中z-index分别设置不同的值，突出显示活跃状态tab标签，且防止由于叠加影响彼此的style样式。

note 4

略

附录

参考案例代码——听我一言：Html+CSS:Tab页实现 ↩︎
CSS 选择器 ↩︎

相关阅读:
网络防火墙技术知多少？了解如何保护您的网络安全
高级架构师_Redis_第2章_数据类型与底层数据结构
学习笔记|计数器|Keil软件中 0xFD问题|I/O口配置|STC32G单片机视频开发教程（冲哥）|第十二集：计数器的作用和意义
前端 class 和 id 问题
apk反编译工具下载
STM32+USB3300复位枚举异常的问题
【历史上的今天】8 月 8 日：中国第一个校园 BBS 成立；网景通信上市；EarthLink 创始人出生
JDBC数据库事务
GoFrame+Vue+ElementUI极速开发框架
js的数据类型

原文地址：https://blog.csdn.net/qq_21264377/article/details/126047038