html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
一、在一个页面（不跨页面）
效果：
代码
<!DOCTYPE html>
<html><head><style>/* 设置标签页外层容器样式 */.tab-container {width: 100%;background-color: #f1f1f1;overflow: hidden;}/* 设置标签页选项卡的样式 */.tab {float: left;padding: 8px 16px;background-color: #ccc;cursor: pointer;}/* 设置选中的标签页样式 */.active {background-color: #aaa;}/* 设置标签页内容的样式 */.tab-content {display: none;padding: 16px;background-color: #fff;}</style></head><body><div class="tab-container"><!-- 标签页选项卡 --><div class="tab active" onclick="openTab(event,'tab1')">标签页1</div><div class="tab" onclick="openTab(event,'tab2')">标签页2</div><div class="tab" onclick="openTab(event,'tab3')">标签页3</div><!-- 标签页内容 --><div id="tab1" class="tab-content" style="display:block;"><h3>标签页1内容</h3><p>这是标签页1的内容。</p></div><div id="tab2" class="tab-content"><h3>标签页2内容</h3><p>这是标签页2的内容。</p></div><div id="tab3" class="tab-content"><h3>标签页3内容</h3><p>这是标签页3的内容。</p></div></div><script>function openTab(event, tabName) {// 获取所有标签页内容元素var tabContent = document.getElementsByClassName("tab-content");// 隐藏所有标签页内容for (var i = 0; i < tabContent.length; i++) {tabContent[i].style.display = "none";}// 移除所有标签页选项卡的 active 类var tabs = document.getElementsByClassName("tab");for (var i = 0; i < tabs.length; i++) {tabs[i].className = tabs[i].className.replace(" active", "");}// 显示当前选中标签页内容document.getElementById(tabName).style.display = "block";// 添加 active 类到当前选中标签页选项卡event.currentTarget.className += " active";}</script></body>
</html>
二、Tab标签，跨页面效果
效果
代码
首页
<!DOCTYPE html>
<html><head><style>.tab {display: inline-block;padding: 8px;background-color: #f2f2f2;cursor: pointer;}.tab.active {background-color: #ccc;}#content {border: 1px solid #ccc;padding: 10px;height: 400px;overflow: auto;}</style></head><body><div id="tabs"></div><div id="content"></div><script>// 示例超链接列表数据var links = [{ title: '页面一', url: 'page1.html' },{ title: '页面二', url: 'page2.html' },{ title: '页面三', url: 'page3.html' }];var tabsContainer = document.getElementById('tabs');var contentContainer = document.getElementById('content');// 创建标签页和加载内容函数function createTabAndLoadContent(title, url) {var tab = document.createElement('div');tab.innerText = title;tab.className = 'tab';// 点击标签页切换内容tab.addEventListener('click', function() {loadContent(url);setActiveTab(tab);});tabsContainer.appendChild(tab);}// 加载内容到右侧窗口function loadContent(url) {contentContainer.innerHTML = '加载中...';// 模拟异步加载页面内容setTimeout(function() {// 使用iframe展示页面内容contentContainer.innerHTML = '<iframe src="' + url + '" frameborder="0" style="width: 100%; height: 100%;"></iframe>';}, 500);}// 设置活动标签页样式function setActiveTab(tab) {var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));tabs.forEach(function(t) {t.classList.remove('active');});tab.classList.add('active');}// 初始化超链接列表和标签页links.forEach(function(link) {createTabAndLoadContent(link.title, link.url);});</script></body>
</html>
page1.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面1</title></head><body>页面1</body>
</html>三、 Tab标签实现页面顶部标签栏
效果
代码
<!DOCTYPE html>
<html><head><style>/* 左侧超链接列表 */.link {display: block;padding: 8px;background-color: #f2f2f2;cursor: pointer;}/* 顶部标签栏 */#tabsContainer {display: flex;align-items: center;}.tab {display: flex;align-items: center;/* padding: 5px 15px 5px 15px; */background-color: #f2f2f2;cursor: pointer;position: relative;margin-right: 10px;border-radius: 3px;}/* 标签标题 */.tab .title {/* margin-right: 5px; *//* width:10px; *//* border:1px solid black; */padding:5px 15px 5px 15px;/* width:90% */}/* 标签关闭按钮 */.tab .close-btn {/* width:10%; */font-size: 10px;font-weight: bold;cursor: pointer;padding:5px 5px 5px 0;/* border:1px solid black; */}.tab.active {background-color: #ccc;}/* 右侧内容 */#links {float: left;width: 200px;padding: 10px;}#tabs {padding: 10px;}#content {border: 1px solid #ccc;padding: 10px;height: 400px;overflow: auto;}</style></head><body><div id="links"><!-- 在这里添加你的超链接 --><a href="#" onclick="loadContent('page1.html', '超链接1'); return false;"class="link">超链接1</a><a href="#" onclick="loadContent('page2.html', '超链接2'); return false;"class="link">超链接2</a><a href="#" onclick="loadContent('page3.html', '超链接3'); return false;"class="link">超链接3</a></div><div id="tabsContainer"></div><div id="content"></div><script>var tabsContainer = document.getElementById('tabsContainer');var contentContainer = document.getElementById('content');var activeTab = null;// 加载内容到右侧窗口function loadContent(url, tabName) {contentContainer.innerHTML = '加载中...';// 模拟异步加载页面内容setTimeout(function() {// 使用 iframe 展示页面内容contentContainer.innerHTML = '<iframe src="' + url + '" frameborder="0" style="width: 100%; height: 100%;"></iframe>';// 创建标签并将其激活createTabAndSetActive(url, tabName);}, 500);}// 创建标签并将其激活function createTabAndSetActive(url, tabName) {// 如果标签已存在，则激活该标签var tab = tabsContainer.querySelector('[data-url="' + url + '"]');if (tab) {setActiveTab(tab);return;}// 创建新的标签tab = document.createElement('div');tab.className = 'tab';tab.setAttribute('data-url', url);var title = document.createElement('span');title.className = 'title';title.innerText = tabName;tab.appendChild(title);var closeBtn = document.createElement('span');closeBtn.innerText = 'X';closeBtn.className = 'close-btn';closeBtn.addEventListener('click', function(event) {event.stopPropagation();closeTab(tab);});tab.appendChild(closeBtn);// 点击标签页切换内容tab.addEventListener('click', function() {loadContent(url, tabName);setActiveTab(tab);});tabsContainer.appendChild(tab);setActiveTab(tab);}// 设置活动标签页样式function setActiveTab(tab) {var tabs = Array.from(tabsContainer.getElementsByClassName('tab'));tabs.forEach(function(t) {t.classList.remove('active');});tab.classList.add('active');activeTab = tab;}// 关闭标签页function closeTab(tab) {if (tab === activeTab) {contentContainer.innerHTML = '';activeTab = null;}tab.parentNode.removeChild(tab);}</script></body>
</html>
相关文章：
html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
一、在一个页面（不跨页面） 效果： 代码 <!DOCTYPE html> <html><head><style>/* 设置标签页外层容器样式 */.tab-container {width: 100%;background-color: #f1f1f1;overflow: hidden;}/* 设置标签页选项卡的样式…...
n-皇后问题（DFS）
n−皇后问题是指将 n 个皇后放在 nn 的国际象棋棋盘上，使得皇后不能相互攻击到，即任意两个皇后都不能处于同一行、同一列或同一斜线上。 现在给定整数 n，请你输出所有的满足条件的棋子摆法。 输入格式 共一行，包含整数 n。 输出…...
漏洞利用和权限提升
使用Kali Linux进行漏洞利用和权限提升是渗透测试过程中的一部分，用于评估系统的安全性。 漏洞利用： 选择目标： 首先，确定 要进行漏洞利用的目标系统。这可能是一个具有已知漏洞的应用程序、服务或操作系统。 收集信息ÿ…...
开源网安受邀参加软件供应链安全沙龙，推动企业提升安全治理能力
8月23日下午，合肥软件行业软件供应链安全沙龙在中安创谷科技园举办。此次沙龙由合肥软件产业公共服务中心联合中安创谷科技园公司共同主办，开源网安软件供应链安全专家王晓龙、尹杰受邀参会并带来软件供应链安全方面的精彩内容分享，共同探讨…...
回归分析扫盲：为什么非线性模型不能直接用最优子集选择法
最近有人给我发了篇文章： 一个问题有一堆变量，我们要选取哪些变量来建模呢？我们来看看这篇文章是怎么做的： 这个方法简单来说就是：对于这一堆变量，我们每次尝试剔除其中一个变量，然后用剩下的变…...
单例模式简介
概念： 单例模式（Singleton Pattern）是一种创建型设计模式，它确保一个类只有一个实例，并提供全局访问点。单例模式的核心思想是限制某个类只能创建一个对象实例，并提供对该实例的全局访问。这样可以避免多个…...
WPF自定义命令及属性改变处理
1、项目建构 2、自定义命令 namespace WpfDemo.Base {public class MyCommand : ICommand{Action executeAction;public MyCommand(Action action){executeAction action;}public event EventHandler? CanExecuteChanged;public bool CanExecute(object? parameter){retu…...
macbook m1 docker中使用go
已经有一个centos8的镜像，本来打算在centos8中安装go 安装方法： # 1.下载go的安装包 mkdir install && cd install # 任意创建个文件夹 wget https://go.dev/dl/go1.20.2.linux-amd64.tar.gz# 2. 解压 tar -C xzf go1.20.2.linux-amd64.tar.g…...
【Hello Network】DNS协议 NAT技术 代理服务器
本篇博客简介：介绍DNS协议 NAT技术和代理服务器 网络各协议补充 DNSDNS背景DNS介绍DNS总结域名简介 NAT技术NAT技术背景NAT IP转换过程NAPTNAT技术缺陷NAT和代理服务器 网络协议总结应用层传输层网络层数据链路层 DNS DNS是一整套从域名映射到IP的系统 DNS背景 为…...
Android 使用模拟器模拟Linux操作系统
1. 简介 在Android手机上使用模拟器模拟ubuntu等操作系统，便于测试 2. 软件准备 Termux：是一款 Android 终端模拟器和 Linux 环境应用程序，无需 root 或设置即可直接运行。虽然酷安和谷歌菜市场都能下载，但这些渠道都很久没更新…...
机器学习基础之《分类算法（5）—朴素贝叶斯算法原理》
一、朴素贝叶斯算法 1、什么是朴素贝叶斯分类方法 之前用KNN算法，分类完直接有个结果，但是朴素贝叶斯分完之后会出现一些概率值，比如： 这六个类别，它都有一定的可能性 再比如，对文章进行分类：…...
# Go学习-Day6
文章目录 Go学习-Day6封装继承接口 Go学习-Day6 个人博客：CSDN博客 封装 类似java的类的封装，这里我们利用大小写和工厂模式来实现封装的功能略过 继承 相似的类具有相似的方法，反复绑定相同的方法，代码冗余，所以引…...
分布式 - 服务器Nginx：一小时入门系列之 HTTPS协议配置
文章目录 1. HTTPS 协议2. 生成 SSL 证书和私钥文件3. 配置 SSL 证书和私钥文件4. HTTPS 协议优化 1. HTTPS 协议 HTTPS 是一种通过计算机网络进行安全通信的协议。它是HTTP的安全版本，通过使用 SSL 或 TLS 协议来加密和保护数据传输。HTTPS的主要目的是确保在客户…...
探秘Linux系统性能监控神器！Linux和Python技术持续学习者必看！
引言 作为Linux运维工程师，我们经常需要对服务器的性能进行监控和调优。而Python作为一门强大的脚本语言，可以帮助我们轻松实现各种系统性能监控任务。本文将介绍几个实用的Python库和工具，帮助我们监控Linux系统的CPU、内存、磁盘和网络等性…...
文心一言续写太监小说《名侦探世界的巫师》
《名侦探世界的巫师》是我的童年回忆，总是想着续写一下，但是又没有时间和文笔，文心一言出了，由于目前大模型貌似可以联网，可以尝试搞一波~ 目录 文章1【前六个故事还能看，后面就是在重复】故事2【辣眼睛】…...
Solidity 合约安全，常见漏洞（第三篇）
Solidity 合约安全，常见漏洞（第三篇） ERC20 代币问题 如果你只处理受信任的 ERC20 代币，这些问题大多不适用。然而，当与任意的或部分不受信任的 ERC20 代币交互时，就有一些需要注意的地方。 ERC20&#…...
Linux安装Redis数据库，无需公网IP实现远程连接
文章目录 1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 保留一个固定tcp地址4.2 配置固定TCP地址4.3 使用固定的tcp地址连接 Redis作为一款高速缓存的key value键值对的数据库,在…...
智慧政务，长远布局——AIGC引领，加速推进数字化政府建设
在人工智能、虚拟现实等领域迅猛发展且日益成熟的背景下，AI行业正迈向蓬勃发展的全新阶段，市场规模持续扩张。与此同时，数字服务也正在蓬勃兴起，新一代信息技术为数字政府构建了坚实支撑，重塑了政务信息化管理、业务架…...
中央处理器（CPU）：组成、指令周期、数据通路、控制方式、控制器、指令流水线，补充（多处理器系统、硬件多线程）
中央处理器（CPU，Central Processing Unit），计算机控制和运算的核心，是信息处理和程序运行的执行单元。 CPU主要功能：处理指令、执行操作、控制时间、处理中断、处理数据。 其中，处理指令、执行…...
开源微服务如何选型？Spring Cloud、Dubbo、gRPC、Istio 详细对比
作者：刘军 不论您是一名开发者、架构师、CTO， 如果您曾深度参与在微服务开发中，那么相信您一定有过开源微服务框架或体系选型的疑问：Apache Dubbo、Spring Cloud、gRPC 以及 Service Mesh 体系产品如 Istio，到底应该选…...
Nginx的HTTPS部署与安全性能优化
Nginx作为一款高性能的Web服务器和反向代理服务器，被广泛用于应用部署和负载均衡。在安全环保意识的逐渐提高下，HTTPS也成为现代Web应用中必不可少的一环。本篇文章将重点介绍Nginx的HTTPS部署和安全性能优化。 一、Nginx的HTTPS部署 证书申请 首先需要去…...
5.8. Trusted Board Boot
5.8. Trusted Board Boot启动 Trusted Board Boot(TBB) 功能通过验证所有固件镜像（包括正常世界引导加载程序）来防止恶意固件在平台上运行。它通过使用公钥加密标准 (PKCS) 建立信任链来实现这一点。 本文介绍了可信固件-A (TF-A) TBB 的设计，它是Trusted Board Boot(TBBR…...
微信小程序——van-field中的left-icon属性自定义
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...
一文学会lua脚本
文章目录 0.前言背景应用 1. 学习大纲1. 学习基本语法：2. 理解函数和模块：3. 深入数据结构：4. 高级特性和技巧：5. 实践项目： 2. Lua脚本2.1 学习基本语法2.2 理解函数和模块2.3 深入数据结构2.4 高级特性和技巧 3. 高级…...
学习JAVA打卡第四十二天
正则表达式及字符串的替换与分解 ⑴正则表达式 正则表达式是string对象的字符序列，该字符序列中含有具有特殊意义的字符，这些特殊字符称作正则表达式的元字符。 注：由于“ ”代表任何一个字符，所以在正则表达式中如果想使用普…...
2023-8-25食物链
题目链接：食物链 #include <iostream>using namespace std;const int N 50010;int n, m; int p[N], d[N];int find(int x) {if(p[x] ! x){int t find(p[x]);d[x] d[p[x]];p[x] t;}return p[x]; }int main() {cin >> n >> m;for(int i 1; i…...
为什么要使用IP地址进行定位
IP地址定位是一种以互联网协议地址（IP地址）为基础的技术，它能够准确地确定一个设备在互联网上的位置。这种技术的应用范围非常广泛，从个人用户到企业机构甚至是国家安全和网络安全等领域都需要使用IP地址定位。 首先，I…...
CSS概念
1、CSS与HTML结合方式 1.1 第一种方式 内联/行内样式 就是在我们的HTML标签上通过style属性来引用CSS代码。 优点:简单方便 ； 缺点:只能对一个标签进行修饰。 1.2 第二种方式 内部样式 我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在…...
淘宝API技术解析，实现关键词搜索淘宝商品（商品详情接口等）
淘宝提供了开放平台接口（API）来实现按图搜索淘宝商品的功能。您可以通过以下步骤来实现： 获取开放平台的访问权限：首先，您需要在淘宝开放平台创建一个应用，获取访问淘宝API的权限。具体的申请步骤和要求可以…...
Redis 7 教程 数据类型 基础篇
🌹 引导 Commands | Redishttps://redis.io/commands/Redis命令中心（Redis commands） -- Redis中国用户组（CRUG）Redis命令大全，显示全部已知的redis命令，redis集群相关命令，近期也会翻译过来,Redis命令参考，也可以直接输入命令进行命令检索。...
-bash: tree: command not found 的解决方法
在学习git操作时发现使用命令tree .git时显示错误 在网上查阅资料后，发现可能是没有安装生成tree的应用，所以我们使用命令安装应用即可 sudo yum install -y tree像这样就是安装成功了 我们再来试试 问题解决了，成功显示出树形结构...
SPI总线协议
简述 SPI协议是一种芯片与芯片之间的通讯，全称是Serial Peripheral Interface SPI通讯采用一主多从模式，产生时钟的一侧称为主机，另一侧称为从机。只有一个主机（一般来说可以是微控制器/MCU），但是可以有一…...
Ubuntu20.04配置mysql配置主从复制
ubuntu20.04：mysql主库 sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf # 修改完毕重启 sudo service mysql stop sudo service mysql start主库mysqld.cnf配置 [mysqld] ... # bind-address>->--- 127.0.0.1 # 注释掉，允许外部连接 # mysqlx-b…...
HTTP 服务器(基于go实现)
编写一个 HTTP 服务器，接收客户端 request，并将 request 中带的 header 写入 response header 解析HTTP请求头 import ("fmt""net/http" )func headers(w http.ResponseWriter, r *http.Request) {// 将request中的信息写入到 w中…...
【整数二分】
数的范围 #include<iostream> using namespace std; const int N 100000 11;int n; int q; int a[N];int key;int main(){cin>>n>>q;for(int i0;i<n;i)cin>>a[i];while(q--){cin>>key;//先去找左（大于等于）再去找右…...
开发一款AR导览导航小程序多少钱？ar地图微信小程序 ar导航 源码
随着科技的不断发展，增强现实（AR）技术在不同领域展现出了巨大的潜力。AR导览小程序作为其中的一种应用形式，为用户提供了全新的观赏和学习体验。然而，开发一款高质量的AR导览小程序需要投入大量的时间、人力和技术资源…...
Shell 编程快速入门 之 函数基础知识
目录 shell函数基础知识 函数定义 函数名 函数体 参数 返回值 return返回值的含义 return与echo返回值的区别 可变参数函数 自定义库函数 定义库函数 调用库函数 执行结果 递归函数 阶乘函数 斐波那契函数 shell函数基础知识 函数定义 函数名 Shell函数用…...
Flink流批一体计算（18）：PyFlink DataStream API之计算和Sink
目录 1. 在上节数据流上执行转换操作，或者使用 sink 将数据写入外部系统。 2. File Sink File Sink Format Types Row-encoded Formats Bulk-encoded Formats 桶分配 滚动策略 3. 如何输出结果 Print 集合数据到客户端，execute_and_collect…...
03.sqlite3学习——数据类型
目录 sqlite3学习——数据类型 SQL语句的功能 SQL语法 SQL命令 SQL数据类型 数字类型 整型 浮点型 定点型decimal 浮点型 VS decimal 日期类型 字符串类型 CHAR和VARCHAR BLOB和TEXT SQLite 数据类型 SQLite 存储类 SQLite 亲和类型(Affinity)及类型名称 Boo…...
LLM-chatgpt训练过程
流程简介 主要包含模型预训练和指令微调两个阶段 模型预训练：搜集海量的文本数据，无监督的训练自回归decoder； O T P ( O t < T ) O_TP(O_{t<T}) OTP(Ot<T)，损失函数CE loss指令微调：在输入文本中加入…...
【学习笔记】[ABC274Ex] XOR Sum of Arrays
有点难😅 真的是 A B C ABC ABC的难度吗😅 非常精妙的哈希题目。 定义矩阵乘法： c i , j ⊕ ( a i , k & b k , j ) c_{i,j}\oplus (a_{i,k}\& b_{k,j}) ci,j⊕(ai,k&bk,j) 之所以可以矩阵乘法是因为满足 ( a ⊕ b )…...
抖音web频道爬虫
抖音web频道爬虫代码： <?php header(Content-Type:application/json; charsetutf-8);//抖音频道爬虫class DouyinChannel{private $app_id 1;private $spider_code 1;private $channels [["channel_name" > "热点","url"…...
sql中的替换函数replace()总结
1，表达式 --replace（）--语法: REPLACE ( string_expression , string_pattern , string_replacement )--参数：string_expression：字符串表达式string_pattern：想要查找的子字符串string_replacement&#…...
vue3 vite使用 monaco-editor 报错
报错：Unexpected usage at EditorSimpleWorker.loadForeignModule 修改配置： "monaco-editor-webpack-plugin": "^4.2.0",删除不用 版本： "monaco-editor": "^0.28.1", 修改如下： opti…...
微信小程序获取蓝牙权限
要获取微信小程序中的蓝牙权限，您可以按照以下步骤进行操作： 1. 在 app.json 文件中添加以下代码： "permissions": { "scope.userLocation": { "desc": "需要获取您的地理位置授权以搜索…...
GE 8920-PS-DC安全模块
安全控制： 这个安全模块通常用于实现工业自动化系统中的安全控制功能。它可以监测各种安全参数，如机器运动、温度、压力等，以确保系统在安全范围内运行。 PLC兼容性： 通常，这种安全模块可以与可编程逻辑控制器&#x…...
UG\NX二次开发 使用BlockUI设计对话框时，如何设置默认的开发语言？
文章作者：里海 来源网站：王牌飞行员_里海_里海NX二次开发3000例,C\C++,Qt-CSDN博客 简介： NX二次开发使用BlockUI设计对话框时，如何设置默认的代码语言？ 效果： 方法： 依次打开“文件”->“实用工具”->“用户默认设置”->“用户界面”->“操作记录”->“…...
W5500-EVB-PICO进行UDP组播数据回环测试（九）
前言 上一章我们用我们的开发板作为UDP客户端连接服务器进行数据回环测试，那么本章我们进行UDP组播数据回环测试。 什么是UDP组播？ 组播是主机间一对多的通讯模式， 组播是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将…...
24 WEB漏洞-文件上传之WAF绕过及安全修复
目录 WAF绕过上传参数名解析:明确哪些东西能修改?常见绕过方法：符号变异-防匹配( " ;)数据截断-防匹配(%00 ; 换行)重复数据-防匹配(参数多次)搜索引擎搜索fuzz web字典文件上传安全修复方案 WAF绕过 safedog BT(宝塔) XXX云盾 宝塔过滤的比安全狗厉害一些&a…...
Python科研绘图--Task03
目录 图类型 关系类型图 散点图的例子 数据分布型图 rugplot例子 分类数据型图 编辑回归模型分析型图 多子图网格型图 FacetGrid() 函数 PairGrid() 函数 绘图风格、颜色主题和绘图元素缩放比例 绘图风格 颜色主题 绘图元素缩放比列 图类型 关系类型图 数据集变量…...