利用原生的javascript实现简单的tab选项卡

最新推荐文章于 2024-05-21 14:15:14 发布

Init_Vieeee

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量942

点赞数

分类专栏： js选项卡文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_60687710/article/details/121688543

版权

js选项卡专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab选项卡</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">tab选项卡</h1>
		</header>
		<nav>
			<ul class="nav">
				<li class="tab avtive" onclick="openTab(event,'tab-1')"><a href="#">关注</a></li>
				<li class="tab" onclick="openTab(event,'tab-2')"><a href="#">点赞</a></li>
				<li class="tab" onclick="openTab(event,'tab-3')"><a href="#">投币</a></li>
				<li class="tab" onclick="openTab(event,'tab-4')"><a href="#">支持</a></li>
			</ul>
		</nav>
		
		<div class="detail">
			<div class="item disblock" id="tab-1">
				<p>1111111</p>
			</div>
			<div class="item" id="tab-2">
				<p>222222</p>
			</div>
			<div class="item" id="tab-3">
				<p>33333</p>
			</div>
			<div class="item" id="tab-4">
				<p>44444</p>
			</div>
		</div>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

2. css

*{
	padding: 0;
	margin: 0;
}

body{
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
	background: linear-gradient(200deg,#b1f4cf,#9890e3);
}

.nav{
	width: 100%;
	height: 40px;
	background-color: red;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.tab{
	width: 25%;
	text-align: center;
	line-height: 40px;
}

.nav li a{
	text-decoration: none;
	font-weight: 600;
	color: #1b2b3b;
	font-size: 20px;
	
}

/* .nav li a:hover{
	color: #B1F4CF;
} */

ul,li{
	list-style: none;
}

.detail{
	width: 100%;
	background-color: #9890E3;
}

.item{
	height: 400px;
	width: 100%;
	background-color: green;
	display: none;
}

.avtive{
	background-color: cadetblue
}

.disblock{
	display: block;
}

3.js部分（主要）

function openTab(evt,tab) {
	var i,tabContent,tablinks;
	tabContent = document.getElementsByClassName('item');
	for( i=0; i<tabContent.length; i++ ){
		tabContent[i].style.display = 'none'
	}
	tablinks = document.getElementsByClassName('tab');
	for(i=0; i<tablinks.length; i++){
		tablinks[i].className = tablinks[i].className.replace(' avtive','');
	}
	document.getElementById(tab).style.display = "block";
	evt.currentTarget.className += ' avtive'
}

自定义一个函数 evt，tab 是触发函数时元素传递过来的分别时元素本身和自定义的id值（供下面的显示区域使用）

replace 字符转的是替换，这里拿到class里面的内容后一定要注意替换的时候前面需要有空格

Init_Vieeee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用原生的javascript实现简单的tab选项卡

1.HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>tab选项卡</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <header class="mui-bar mui-
复制链接

扫一扫