HTML+CSS+JS 选项卡导航栏

效果演示

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/340200.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

家宽动态公网IP,使用docker+ddns 实现动态域名解析

官方地址&#xff1a;https://github.com/jeessy2/ddns-go 安装docker docker pull jeessy/ddns-godocker run -d --name ddns-go --restartalways --nethost -v /opt/ddns-go:/root jeessy/ddns-go然后访问ip端口 配置时注意如下

蓝图collapseNodes很有用

学到了&#xff0c;选中N个节点后&#xff0c;再右键collapseNode&#xff0c;可以使代码很清晰&#xff0c;双击后可以看到相应的代码&#xff0c;具有层次感。

Qt图像处理技术十二:QImage实现边缘检测(sobel算法)

效果图 原理 Sobel算法是一种常用的边缘检测算法&#xff0c;它利用图像的灰度变化来检测图像中物体的边缘。Sobel算法主要包括以下几个步骤&#xff1a; 灰度化&#xff1a; 首先将彩色图像转换为灰度图像&#xff0c;因为灰度图像只包含单通道的灰度信息&#xff0c;有利于…

实战16:基于apriori关联挖掘FP-growth算法挖掘关联规则的手机销售分析-代码+数据

直接看视频演示: 基于apriori关联挖掘关联规则的手机销售分析与优化策略 直接看结果: 这是数据展示: 挖掘结果展示: 数据分析展示:

【轻量化】YOLOv10: Real-Time End-to-End Object Detection

论文题目&#xff1a;YOLOv10: Real-Time End-to-End Object Detection 研究单位&#xff1a;清华大学 论文链接&#xff1a;http://arxiv.org/abs/2405.14458 代码链接&#xff1a;https://github.com/THU-MIG/yolov10 推荐测试博客&#xff1a;YOLOv10最全使用教程&#xff0…

c++与c

命名空间的设置&#xff1a; 避免冲突 命名空间&#xff1a; 如果将变量全部定义在全局可能不安全&#xff0c;都可以进行修改。 如果将变量定义在局部&#xff0c;当出了大括号就不能使用。 所以说在定义一个命名空间的时候 定义函数&#xff0c;变量&#xff0c;命名空间…

Linux——简单指令汇总

Linux&#xff0c;一般指GNU/Linux&#xff0c;是一种免费使用和自由传播的类UNIX操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹&#xff08;Linus Benedict Torvalds&#xff09;于1991年10月5日首次发布&#xff0c;它主要受到Minix和Unix思想的启发&#xff0c;是一个…

js 给数组对象添加多个属性

// 假设有一个数组对象 let items [{ id: 1, name: Item 1 },{ id: 2, name: Item 2 },{ id: 3, name: Item 3 } ];// 要添加的新属性 const newProps {newProp1: value1,newProp2: value2 };// 使用map方法添加新属性 let updatedItems items.map(item > ({ ...item, ..…

计算机毕业设计hadoop+spark+hive物流快递大数据分析平台 物流预测系统 物流信息爬虫 物流大数据 机器学习 深度学习 知识图谱 大数据

1.Python爬虫采集物流数据等存入mysql和.csv文件&#xff1b; 2.使用pandasnumpy或者MapReduce对上面的数据集进行数据清洗生成最终上传到hdfs&#xff1b; 3.使用hive数据仓库完成建库建表导入.csv数据集&#xff1b; 4.使用hive之hive_sql进行离线计算&#xff0c;使用spark之…

植物大战僵尸杂交版全平台 PC MAC 安卓手机下载安装详细图文教程

最近植物大战僵尸杂交版非常的火&#xff0c;好多小伙伴都想玩一玩&#xff0c;但作者只分享了 win 版&#xff0c;像手机还有MAC电脑都没有办法安装&#xff0c;身为 MAC 党当然不能放弃&#xff0c;经过一番折腾&#xff0c;也是成功在所有平台包括手机和MAC电脑都成功安装上…

JS加密解密/XSS的防御

之前有一篇文章提到过xss&#xff0c;今天说一下防御策略 分析一下这段代码&#xff0c;拆解一下代码&#xff0c;写一篇对于防御xss的心得 if (arr ! null) { var filterXSS function(e) {if (!e)return e;for (; e ! unescape(e); )e unescape(e);for (var r ["<…

前端框架前置知识之Node.js:fs模块、path模块、http模块、端口号介绍

什么是模块&#xff1f; 类似插件&#xff0c;封装了方法 / 属性 fs 模块- 读写文件 代码示例 // 1. 加载 fs 模块对象 const fs require(fs) // 2. 写入文件内容 fs.writeFile(./test.txt, hello, Node.js, (err) > {if (err) console.log(err) //若 err不为空&#xf…

AI图 - 卡哇伊Q版 (7)

在看一本如何画Q版人物的绘画书时&#xff0c;收集了一些图片想临摹&#xff0c;收集过程中发现同类图片越来越多&#xff0c;肯定都是AI生成的了&#xff0c;就去搜有没有同款现成的Lora可用&#xff0c;下载了几个效果都很差&#xff0c;就找回以前的经验&#xff0c;准备了一…

数据结构--关键路径

事件v1-表示整个工程开始&#xff08;源点&#xff1a;入度为0的顶点&#xff09; 事件v9-表示整个工程结束&#xff08;汇点&#xff1a;出度为0的顶点&#xff09; 关键路径&#xff1a;路径长度最长的路径 求解关键路径问题&#xff08;AOE网&#xff09; 定义四个描述量 …

事务详讲(本地及分布式)

本地事务在分布式的问题: 因为在分布式服务中,难免一个接口中会有很多调用远程服务的情况,这个就非常容易出现问题,以下是一个详细的例子: 例如,你为了保证事物的一致性等要求,所以,你方法上只写了Transactional,但你的业务中又需要调用其他微服务的方法(Feign),这时就容易出现…

神经网络基础

文章目录 一、神经网络的基本构成部分1.1 神经元1.2 单层神经网络1.3 多层神经网络1.4 非线性激活函数&#xff08;activation functions&#xff09;1.5 输出形式 二、神经网络的训练方式2.1 损失函数2.2 梯度下降法2.3 反向传播&#xff08;Backpropagation&#xff09; 三、…

二叉查找树

一、实验题目 &#xff08;1&#xff09;实验题目 二叉查找树 &#xff08;2&#xff09;问题描述 对于查找集合进行动态查找&#xff0c;为了使得元素的插入、删除和查找操作都能够很快地完成&#xff0c;可以采用二叉查找树作为查找结构。对于给定的查找集合&#xff0c;给出…

UFS协议—新手快速入门(二)【5-6】

目录 五、UFS协议栈 六、UFS技术演进与详解 1、UFS应用层 设备管理器 任务管理器 2、UFS传输层 3、UFS互联层 UFS协议—新手快速入门&#xff08;一&#xff09;【1-4】 五、UFS协议栈 UFS&#xff08;Universal Flash Storage&#xff09;协议是针对固态存储设备&…

【UE5教程】使用蓝图显示鼠标

首先&#xff0c;在您的项目中创建一个新的蓝图类&#xff0c;继承自PlayerController。在蓝图编辑器中&#xff0c;找到Event BeginPlay节点&#xff0c;并从它引出一条线。添加Set Show Mouse Cursor节点&#xff0c;勾选Visible&#xff0c;以确保鼠标在游戏开始时可见。 鼠…

SpringCloud Consul基础入门与使用实践总结

【1】Consul简介 官网地址&#xff1a;https://www.consul.io/intro/index.html 下载地址&#xff1a;https://www.consul.io/downloads.html 中文文档&#xff1a;https://www.springcloud.cc/spring-cloud-consul.html ① 基础概念 Consul 是一套开源的分布式服务发现和…