html实现TAB选项卡切换

 <!DOCTYPE html>  
<html>  
<head>  
    <title>选项卡示例</title>  
    <style>  
        .tabs {  
            overflow: hidden; /* 防止选项卡溢出容器 */  
            border: 1px solid #ccc;  
            background-color: #f1f1f1;  
        }  
  
        .tab-links {  
            margin: 0;  
            padding: 0;  
            list-style: none;  
        }  
  
        .tablink {  
            background-color: inherit; /* 继承.tabs的背景色 */  
            float: left; /* 使选项卡并排显示 */  
            border: none;  
            outline: none;  
            cursor: pointer;  
            padding: 14px 16px;  
            transition: background-color 0.3s; /* 平滑过渡效果 */  
            width: 50%; /* 两个选项卡各占50%宽度 */  
            text-align: center; /* 文本居中 */  
        }  
  
        .tablink:hover {  
            background-color: #ddd; /* 鼠标悬停时变色 */  
        }  
  
        .tablink.active {  
            background-color: #4CAF50; /* 选中时变色为蓝色（这里改为绿色以示例，因为纯蓝色可能不易读） */  
            color: white; /* 文本颜色变为白色 */  
        }  
  
        .tabcontent {  
            display: none;  
            padding: 20px;  
            border: 1px solid #ccc;  
            border-top: none;  
        }  
  
        .tabcontent.active {  
            display: block;  
        }  
    </style>  
</head>  
<body>  
  
<div class="tabs">  
    <ul class="tab-links">  
        <li><button class="tablink active" onclick="openTab(event, 'Tab1')">Tab 1</button></li>  
        <li><button class="tablink" onclick="openTab(event, 'Tab2')">Tab 2</button></li>  
    </ul>  
  
    <div id="Tab1" class="tabcontent active">  
        <h3>Tab 1 内容</h3>  
        <p>这是Tab 1的文本内容。</p>  
    </div>  
  
    <div id="Tab2" class="tabcontent">  
        <h3>Tab 2 内容</h3>  
        <p>这是Tab 2的文本内容。</p>  
    </div>  
</div>  
  
<script>  
    function openTab(evt, tabName) {  
        var i, tabcontent, tablinks;  
        tabcontent = document.getElementsByClassName("tabcontent");  
        for (i = 0; i < tabcontent.length; i++) {  
            tabcontent[i].style.display = "none";  
        }  
  
        tablinks = document.getElementsByClassName("tablink");  
        for (i = 0; i < tablinks.length; i++) {  
            tablinks[i].className = tablinks[i].className.replace(" active", "");  
        }  
  
        document.getElementById(tabName).style.display = "block";  
        evt.currentTarget.className += " active";  
    }  
</script>  
  
</body>  
</html>复制

在这里插入图片描述

标签

html实现TAB选项卡切换

鸿蒙HarmonyOS 5.0开发：应用配置文件（Stage模型）-app.json5配置文件

记一次 npm cache clean --force 时报错 Your cache folder contains root-owned files, due to a bug in...的解决方案

Node.js | npm下载安装及环境配置教程

node还在，npm丢了？

npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。

解决使用nvm管理node版本时提示npm下载失败的问题

【Vue框架】用 Vue 的时候应该选 JS 还是 TS？全面解析与实用建议

2024 前端技术盘点：React、Vue、Qwik 谁能领跑 2025？

vue遍历数组的常用方法

58.在 Vue 3 中使用 OpenLayers 绘制点、线、圆、多边形

前端哥

【Qt开发教程】JSON处理QJsonDocument、QJsonObject、QJsonArray类详解及实战应用：用于解析JSON数据字符串，转换为Qt对象，转换Qt对象为JSON格式字符串

浅谈C#库之Newtonsoft.Json‌

第十天：数据提取-JsonPath

【漏洞复现】5. Fastjson 1.2.24反序列化漏洞（CVE-2017-18349）复现

Linux网络 | 网络计算器客户端实现与Json的安装以及使用

解决docker不加载 /etc/docker/daemon.json文件的问题

nlohmann/json安装与使用

mapbox基础，使用geojson加载line线图层，实现纯色填充、图片填充、虚线和渐变效果

鸿蒙HarmonyOS 5.0开发：应用配置文件（Stage模型）-app.json5配置文件

记录小白C 学习之路--熟悉C VScode的json配置文件篇

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html>
	<head>
	<title>选项卡示例</title>
	<style>
	.tabs {
	overflow: hidden; /* 防止选项卡溢出容器 */
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	}

	.tab-links {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	.tablink {
	background-color: inherit; /* 继承.tabs的背景色 */
	float: left; /* 使选项卡并排显示 */
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: background-color 0.3s; /* 平滑过渡效果 */
	width: 50%; /* 两个选项卡各占50%宽度 */
	text-align: center; /* 文本居中 */
	}

	.tablink:hover {
	background-color: #ddd; /* 鼠标悬停时变色 */
	}

	.tablink.active {
	background-color: #4CAF50; /* 选中时变色为蓝色（这里改为绿色以示例，因为纯蓝色可能不易读） */
	color: white; /* 文本颜色变为白色 */
	}

	.tabcontent {
	display: none;
	padding: 20px;
	border: 1px solid #ccc;
	border-top: none;
	}

	.tabcontent.active {
	display: block;
	}
	</style>
	</head>
	<body>

	<div class="tabs">
	<ul class="tab-links">
	<li><button class="tablink active" onclick="openTab(event, 'Tab1')">Tab 1</button></li>
	<li><button class="tablink" onclick="openTab(event, 'Tab2')">Tab 2</button></li>
	</ul>

	<div id="Tab1" class="tabcontent active">
	<h3>Tab 1 内容</h3>
	<p>这是Tab 1的文本内容。</p>
	</div>

	<div id="Tab2" class="tabcontent">
	<h3>Tab 2 内容</h3>
	<p>这是Tab 2的文本内容。</p>
	</div>
	</div>

	<script>
	function openTab(evt, tabName) {
	var i, tabcontent, tablinks;
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 0; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
	}

	tablinks = document.getElementsByClassName("tablink");
	for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}

	document.getElementById(tabName).style.display = "block";
	evt.currentTarget.className += " active";
	}
	</script>

	</body>
	</html>

html实现TAB选项卡切换

微信扫一扫：分享