220230823-实现tab切换效果

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切换</title>
</head>
 
<body>
    <div id="tab1" style="width: 50%;height: 200px;background-color: red;float: left;">我是tab1</div>
    <div id="tab2" style="width: 50%;height: 200px;background-color: pink;display: inline-block;;">我是tab2</div>
    <div id="data1" style="width: 100%;height: 200px;">点击tab1显示我</div>
    <div id="data2" style="width: 100%;height: 200px;">点击tab2显示我</div>
    <script>
        let tab1=document.getElementById("tab1")
        let tab2=document.getElementById("tab2")
        let data1=document.getElementById("data1")
        let data2=document.getElementById("data2")
        tab2.addEventListener("click",function(){
           data1.style.display="none";
           data2.style.display="block"
        })
        tab1.addEventListener("click",function(){
           data1.style.display="block";
           data2.style.display="none"
        })
        
    </script>
</body>
 
</html>

运行结果

在这里插入图片描述

posted @ 2023-08-30 09:56 前端导师歌谣阅读(7) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 实现tab切换效果

· 前端工作小结87-点击tab执行切换

· 工作232：点击tab执行切换

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

220230823-实现tab切换效果

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>tab切换</title>
	</head>

	<body>
	<div id="tab1" style="width: 50%;height: 200px;background-color: red;float: left;">我是tab1</div>
	<div id="tab2" style="width: 50%;height: 200px;background-color: pink;display: inline-block;;">我是tab2</div>
	<div id="data1" style="width: 100%;height: 200px;">点击tab1显示我</div>
	<div id="data2" style="width: 100%;height: 200px;">点击tab2显示我</div>
	<script>
	let tab1=document.getElementById("tab1")
	let tab2=document.getElementById("tab2")
	let data1=document.getElementById("data1")
	let data2=document.getElementById("data2")
	tab2.addEventListener("click",function(){
	data1.style.display="none";
	data2.style.display="block"
	})
	tab1.addEventListener("click",function(){
	data1.style.display="block";
	data2.style.display="none"
	})

	</script>
	</body>

	</html>

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

220230823-实现tab切换效果

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识