HTML+CSS+JS 选项卡导航栏

最新推荐文章于 2024-07-01 16:09:09 发布

若冰说

最新推荐文章于 2024-07-01 16:09:09 发布

阅读量774

点赞数 16

分类专栏：若冰说CSS css 文章标签： css html javascript 前端若冰说CSS

本文链接：https://blog.youkuaiyun.com/weixin_72553980/article/details/139428168

版权

本文介绍如何实现一个导航栏切换内容的效果。导航栏中的每个项都有圆形背景，点击时会放大并显示对应的内容，内容区域包含大号字母和数字，通过淡入淡出效果进行切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果演示

11-选项卡导航栏.gif

实现了一个导航栏切换内容的效果。页面上方有一个导航栏，每个导航项都有一个圆形背景，点击导航项时，圆形背景会放大并显示对应的内容。每个内容区域都包含一个大号字母，数字会在内容区域显示时淡入。点击其他导航项时，当前内容区域会淡出并隐藏，同时新的内容区域会淡入并显示。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡导航栏</title>
    <link rel="stylesheet" href="../fonts/css/font-awesome.css">
    <link rel="stylesheet" href="./11-选项卡导航栏.css">
</head>

<body>
    <div class="container">
        <div class="nav">
            <div class="item active"><i class="fa fa-file-powerpoint-o"></i></div>
            <div class="item"><i class="fa fa-file-photo-o"></i></div>
            <div class="item"><i class="fa fa-file-zip-o"></i></div>
            <div class

最低0.47元/天解锁文章