当前位置：首页 > news >正文

html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）

news 2026/3/29 18:04:40

一、在一个页面（不跨页面）

效果：

代码

<!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;}/* 设置标签页选项卡的样式…...

编程日记 2023/8/26 9:13:58

n-皇后问题（DFS）

n−皇后问题是指将 n 个皇后放在 nn 的国际象棋棋盘上，使得皇后不能相互攻击到，即任意两个皇后都不能处于同一行、同一列或同一斜线上。现在给定整数 n，请你输出所有的满足条件的棋子摆法。输入格式共一行，包含整数 n。输出…...

编程日记 2023/8/26 9:12:57

漏洞利用和权限提升

使用Kali Linux进行漏洞利用和权限提升是渗透测试过程中的一部分，用于评估系统的安全性。漏洞利用： 选择目标： 首先，确定要进行漏洞利用的目标系统。这可能是一个具有已知漏洞的应用程序、服务或操作系统。收集信息&#xff…...

编程日记 2023/8/26 9:11:55

开源网安受邀参加软件供应链安全沙龙，推动企业提升安全治理能力

8月23日下午，合肥软件行业软件供应链安全沙龙在中安创谷科技园举办。此次沙龙由合肥软件产业公共服务中心联合中安创谷科技园公司共同主办，开源网安软件供应链安全专家王晓龙、尹杰受邀参会并带来软件供应链安全方面的精彩内容分享，共同探讨…...

编程日记 2023/8/26 9:10:55

回归分析扫盲：为什么非线性模型不能直接用最优子集选择法

最近有人给我发了篇文章： 一个问题有一堆变量，我们要选取哪些变量来建模呢？我们来看看这篇文章是怎么做的： 这个方法简单来说就是：对于这一堆变量，我们每次尝试剔除其中一个变量，然后用剩下的变…...

编程日记 2023/8/26 9:09:54

单例模式简介

概念： 单例模式（Singleton Pattern）是一种创建型设计模式，它确保一个类只有一个实例，并提供全局访问点。单例模式的核心思想是限制某个类只能创建一个对象实例，并提供对该实例的全局访问。这样可以避免多个…...

编程日记 2023/8/26 9:08:52

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…...

编程日记 2023/8/26 9:07:50

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…...

编程日记 2023/8/26 9:06:49

【Hello Network】DNS协议 NAT技术代理服务器

本篇博客简介：介绍DNS协议 NAT技术和代理服务器网络各协议补充 DNSDNS背景DNS介绍DNS总结域名简介 NAT技术NAT技术背景NAT IP转换过程NAPTNAT技术缺陷NAT和代理服务器网络协议总结应用层传输层网络层数据链路层 DNS DNS是一整套从域名映射到IP的系统 DNS背景为…...

编程日记 2023/8/26 9:05:46

Android 使用模拟器模拟Linux操作系统

1. 简介在Android手机上使用模拟器模拟ubuntu等操作系统，便于测试 2. 软件准备 Termux：是一款 Android 终端模拟器和 Linux 环境应用程序，无需 root 或设置即可直接运行。虽然酷安和谷歌菜市场都能下载，但这些渠道都很久没更新…...

编程日记 2023/8/26 9:04:45

机器学习基础之《分类算法（5）—朴素贝叶斯算法原理》

一、朴素贝叶斯算法 1、什么是朴素贝叶斯分类方法之前用KNN算法，分类完直接有个结果，但是朴素贝叶斯分完之后会出现一些概率值，比如： 这六个类别，它都有一定的可能性再比如，对文章进行分类：…...

编程日记 2023/8/26 9:03:43

# Go学习-Day6

文章目录 Go学习-Day6封装继承接口 Go学习-Day6 个人博客：CSDN博客封装类似java的类的封装，这里我们利用大小写和工厂模式来实现封装的功能略过继承相似的类具有相似的方法，反复绑定相同的方法，代码冗余，所以引…...

编程日记 2023/8/26 9:02:42

分布式 - 服务器Nginx：一小时入门系列之 HTTPS协议配置

文章目录 1. HTTPS 协议2. 生成 SSL 证书和私钥文件3. 配置 SSL 证书和私钥文件4. HTTPS 协议优化 1. HTTPS 协议 HTTPS 是一种通过计算机网络进行安全通信的协议。它是HTTP的安全版本，通过使用 SSL 或 TLS 协议来加密和保护数据传输。HTTPS的主要目的是确保在客户…...

编程日记 2023/8/26 9:01:40

探秘Linux系统性能监控神器！Linux和Python技术持续学习者必看！

引言作为Linux运维工程师，我们经常需要对服务器的性能进行监控和调优。而Python作为一门强大的脚本语言，可以帮助我们轻松实现各种系统性能监控任务。本文将介绍几个实用的Python库和工具，帮助我们监控Linux系统的CPU、内存、磁盘和网络等性…...

编程日记 2023/8/26 9:00:40

文心一言续写太监小说《名侦探世界的巫师》

《名侦探世界的巫师》是我的童年回忆，总是想着续写一下，但是又没有时间和文笔，文心一言出了，由于目前大模型貌似可以联网，可以尝试搞一波~ 目录文章1【前六个故事还能看，后面就是在重复】故事2【辣眼睛】…...

编程日记 2023/8/26 8:59:39

Solidity 合约安全，常见漏洞（第三篇）

Solidity 合约安全，常见漏洞（第三篇） ERC20 代币问题如果你只处理受信任的 ERC20 代币，这些问题大多不适用。然而，当与任意的或部分不受信任的 ERC20 代币交互时，就有一些需要注意的地方。 ERC20&#…...

编程日记 2023/8/26 8:58:38

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键值对的数据库,在…...

编程日记 2023/8/26 8:57:35

智慧政务，长远布局——AIGC引领，加速推进数字化政府建设

在人工智能、虚拟现实等领域迅猛发展且日益成熟的背景下，AI行业正迈向蓬勃发展的全新阶段，市场规模持续扩张。与此同时，数字服务也正在蓬勃兴起，新一代信息技术为数字政府构建了坚实支撑，重塑了政务信息化管理、业务架…...

编程日记 2023/8/26 8:56:34

中央处理器（CPU）：组成、指令周期、数据通路、控制方式、控制器、指令流水线，补充（多处理器系统、硬件多线程）

中央处理器（CPU，Central Processing Unit），计算机控制和运算的核心，是信息处理和程序运行的执行单元。 CPU主要功能：处理指令、执行操作、控制时间、处理中断、处理数据。其中，处理指令、执行…...

编程日记 2023/8/26 8:55:33

开源微服务如何选型？Spring Cloud、Dubbo、gRPC、Istio 详细对比

作者：刘军不论您是一名开发者、架构师、CTO， 如果您曾深度参与在微服务开发中，那么相信您一定有过开源微服务框架或体系选型的疑问：Apache Dubbo、Spring Cloud、gRPC 以及 Service Mesh 体系产品如 Istio，到底应该选…...

编程日记 2023/8/26 8:54:32

把 SAP Fiori 远程系统配置讲透：SM59、System Alias、sap-system 与多后端路由实践

在 SAP Fiori launchpad 的真实项目里，用户登录的系统，和应用实际运行、实际取数的系统，往往并不是同一台机器。很多团队在做 PoC 的时候，一切看起来都很顺；一旦进入企业级部署，前端服务器、Gateway、ECC、S/4HANA、SRM 甚至多个区域性后端同时出现，导航失败、取数跑偏、…...

编程新知 2026/3/29 16:26:24

告别SD卡！用ADB在Windows PowerShell里给开发板传文件，保姆级避坑指南

告别SD卡！用ADB在Windows PowerShell里给开发板传文件，保姆级避坑指南嵌入式开发中，文件传输一直是个高频痛点。每次修改代码后，传统方式要么拔出SD卡用读卡器拷贝，要么搭建FTP/NFS网络共享，不仅步骤繁琐…...

编程新知 2026/3/29 15:36:01

从ReVeal到实战：基于图神经网络的智能漏洞检测技术演进与落地思考

1. 图神经网络在漏洞检测中的崛起第一次接触代码漏洞检测领域时，我被传统方法的繁琐流程震惊了。记得当时需要手动定义数百条规则来检测缓冲区溢出漏洞，每次遇到新漏洞类型就得加班加点补充规则。直到2018年遇到ReVeal论文，才发现图神经网络…...

编程新知 2026/3/29 14:53:42

ResNet50实战：用Fruits-360数据集训练自己的水果分类模型（附完整代码）

ResNet50实战：用Fruits-360数据集训练自己的水果分类模型（附完整代码） 在计算机视觉领域，图像分类是最基础也最实用的任务之一。无论是工业质检、医疗影像分析还是零售商品识别，都需要可靠的分类模型作为支撑。而水果分…...

编程新知 2026/3/29 13:18:33

s2-pro效果展示：高语速新闻播报（220字/分钟）清晰度实测

s2-pro效果展示：高语速新闻播报（220字/分钟）清晰度实测 1. 专业语音合成新标杆 s2-pro作为Fish Audio开源的专业级语音合成模型镜像，正在重新定义文本转语音的技术标准。不同于常见的聊天式语音工具，s2-pro专注于提供…...

编程新知 2026/3/29 12:30:12

TPS5430做正负电源，一接负载就烧芯片？我烧了10片才找到这个关键电容

TPS5430正负电源设计避坑指南：为什么Vin与负Vout之间必须加Cd电容？ 当我在实验室里闻到第十颗TPS5430芯片烧毁的焦糊味时，终于意识到这个看似简单的正负电源设计背后藏着不为人知的设计陷阱。作为一款经典的DC-DC降压芯片，TPS5430…...

编程新知 2026/3/29 11:45:39

如何让2008-2017年的老款Mac重获新生？OpenCore Legacy Patcher终极指南

如何让2008-2017年的老款Mac重获新生？OpenCore Legacy Patcher终极指南【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为手中的老款Mac无法安装最新macOS…...

编程新知 2026/3/29 11:05:10

NASA、ESA官方数据源直连失败？Python遥感API调用失效诊断手册（含12个HTTPS/Token/CRS认证报错速查表）

第一章：NASA、ESA官方遥感数据直连失效的典型现象与影响评估近年来，全球多个科研机构与商业遥感平台频繁报告无法稳定访问NASA Earthdata Login和ESA Copernicus Open Access Hub的API端点，表现为HTTP 503、401或连接超时等异常响应。此类直连…...

编程新知 2026/3/29 10:47:00