HTML+CSS+JS 选项卡导航栏

最新推荐文章于 2024-08-07 22:35:34 发布
最新推荐文章于 2024-08-07 22:35:34 发布
阅读量672 收藏 17
点赞数 16
分类专栏： 若冰说CSS css 文章标签： css html javascript 前端 若冰说CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72553980/article/details/139428168
版权

效果演示

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元/天 解锁文章
若冰说
关注
  • 16
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS平移实现双开门效果
瞉韩
08-03 772
一张作为父级背景，两张为兄弟左右布局。之后添加鼠标悬停效果，两张子图分别从左右平移。一共要三张图片，一张作为父级背景，两张为兄弟左右布局。/* right表示精灵图从右面取 */
vue手搓悬浮在线客服按钮
p_s_p的博客
08-07 204
【代码】vue手搓悬浮在线客服按钮。
css揭秘-学习小结
peter6768的博客
08-01 741
尽量用相对单位，比如字体大小和行高，如果是绝对值每次两个都要改，如果是相对值则只要改一个。
【前端学习笔记】CSS基础三
qq_46056318的博客
08-07 525
Sass 是一个 CSS 预处理器，完全兼容所有版本的 CSS。实际上，Sass 并没有真正为 CSS 语言添加任何新功能。// 注释一 /* 注释二 */需要注意，当 Sass 编译成CSS时，第一种注释不会编译到CSS中（只在Sass文件中可见），第二种注释会编译到CSS中。变量：使用符号定义变量，可以存储值并在样式表中重复使用。嵌套：通过嵌套这些代码，可以得到类似HTML结构的CSS代码，使代码更具可读性（父子元素）。
Sass/Scss基础
若末lan的博客
08-07 148
是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 生成良好格式化的 CSS 代码，易于组织和维护。定义变量用@），Sass 变量可以存储的类型有。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3，增加了。一款css预处理语言，
CSS技巧专栏：一日一例 20-纯CSS实现点击会凹陷的按钮
最新发布
uu0216的博客
08-07 190
这是一个非常简单但实用的按钮，乍一看就是个平面，当鼠标移动上去时候，按钮显示白色的圆形按钮。当按钮点下去时候，出现按钮凹陷的效果。
Web开发-html篇-下
Broken_x的博客
08-04 615
html中的大部分标签就已经写完了，这样的写出来的网页没有颜色，过于单调，过于简陋，这就要用到我们接下来要学的CSS和Javascript了，我会接着持续更新……
HTML学习笔记——用HTML记录学习过程4——非主体结构元素
qq_47968354的博客
08-07 89
非主体结构元素主要是为了表达逻辑结构或者附加信息的元素。
vue中v-html 后端返回html + script js中click事件不生效
记录常见的问题以及解决办法
08-07 135
思路： 1.获取到后端返回的html 2.通过正则表达式 之后 截取script 中的 js 逻辑 3.获取body标签 之后创建一个 script 标签 4.把我们截取的 script中的代码放到我们创建的 script标签中 5.把script标签 放到body中
Html详解——Vue基础
敲厉害的燕宝的博客
08-07 690
是一种用来。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
探索Python的文本转换魔法：html2text库的奥秘
AIGC搞起
08-07 404
以下是html2text库中一些基本函数的使用示例，每个示例都附有代码和逐行说明。基本转换这段代码将一个简单的HTML文档转换为文本。忽略链接设置可以忽略HTML中的链接。自定义样式使用baseurl参数可以为相对URL添加基础URL。使用Unicode字符设置会使用Unicode字符代替某些HTML实体。处理表格参数可以设置表格的宽度。html2text是一个功能强大且易于使用的Python库，它能够帮助开发者在多种场景下将HTML内容转换为文本。
JS优化了4个自定义倒计时
lulei5153的博客
08-04 340
【代码】JS优化了4个自定义倒计时。
敦煌文化主题页面 HTML,CSS,Javascript 源码分享
m0_61603704的博客
08-03 323
项目亮点：加入了大量的CSS动画效果，以及JS交互效果，水平适合初学者以及大学生，包含登录注册页。使用技术：HTML，CSS，JavaScript。
牛客JS题（二十一）数组扁平化
不起眼小菜菜的博客
08-04 841
注释很详细，直接上代码……
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1276
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Windows系统上使用nvm管理node版本的详细教程
战族狼魂的博客
08-07 812
NVM 是一个非常方便的工具，使得在不同项目之间管理和切换 Node.js 版本变得非常简单。通过本文的步骤，你可以轻松安装和使用 NVM 来管理你的 Node.js 环境。
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
a_靖的博客
08-07 103
vue实现放大缩小，拖动盒子完整代码付效果图
前端Web-JavaScript(下)
Yu2uki的博客
08-03 1434
补全一下js,忘记了好回来看
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 525
处理vite项目中src和url路径问题
h5的选项卡导航栏怎么写
05-24
实现选项卡导航栏可以采用HTML、CSS和JavaScript等技术。 HTML部分： ```html <div class="tabs"> <div class="tab active" data-tab="tab1">Tab 1</div> <div class="tab" data-tab="tab2">Tab 2</div> <div class="tab" data-tab="tab3">Tab 3</div> </div> <div class="tab-content" id="tab1"> <p>Content for Tab 1</p> </div> <div class="tab-content hidden" id="tab2"> <p>Content for Tab 2</p> </div> <div class="tab-content hidden" id="tab3"> <p>Content for Tab 3</p> </div> ``` CSS部分： ```css .tabs { display: flex; justify-content: center; align-items: center; } .tab { padding: 10px; cursor: pointer; } .tab.active { border-bottom: 2px solid blue; } .tab-content { display: none; } .tab-content.active { display: block; } ``` JavaScript部分： ```javascript const tabs = document.querySelectorAll('.tab'); const tabContents = document.querySelectorAll('.tab-content'); tabs.forEach(tab => { tab.addEventListener('click', () => { const tabId = tab.dataset.tab; activateTab(tabId); }); }); function activateTab(tabId) { tabs.forEach(tab => { if (tab.dataset.tab === tabId) { tab.classList.add('active'); } else { tab.classList.remove('active'); } }); tabContents.forEach(tabContent => { if (tabContent.id === tabId) { tabContent.classList.add('active'); } else { tabContent.classList.remove('active'); } }); } activateTab('tab1'); // 默认激活第一个选项卡 ``` 以上代码实现了一个简单的选项卡导航栏，点击不同的选项卡会显示对应的内容。可以根据需要进行样式和功能的调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值