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

laoyouzhazi

已于 2022-08-15 23:49:10 修改

阅读量2.3k

点赞数 2

分类专栏： Notes 文章标签： html css 前端

于 2022-07-29 08:00:00 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_21264377/article/details/126047038

版权

本文通过HTML和CSS创建了一个简单的Tab导航栏，利用radio输入标签的属性选择器改变Tab样式和内容显示。介绍了如何通过CSS选择器简化代码，并强调在实际应用中可能需要结合JavaScript增强交互体验。文章中还提供了关于固定高度、内容滚动和z-index的注意事项。

摘要由CSDN通过智能技术生成

前言

前几天想写个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>MyFin</title>
</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; **/
        overflow: hidden;
    }
    .tab{
     
        float: left;
        margin: 25px 0;
    }
    .tab [type=radio]{
     
        display: none;
    }
    .tab label{
     
        background: #eee;
        pa

最低0.47元/天解锁文章

laoyouzhazi

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS: 实现Tab导航栏（一）

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

扫一扫

专栏目录