[JavaScript知识库] 利用原生的javascript实现简单的tab选项卡

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 利用原生的javascript实现简单的tab选项卡 -> 正文阅读

[JavaScript知识库]利用原生的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-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里面的内容后一定要注意替换的时候前面需要有空格