“21天好习惯“ 第二十期 — 20之tab栏切换-CSDN博客

本文链接：https://blog.csdn.net/m0_63045631/article/details/121295719

纯原生js实现tab栏切换的效果,即当鼠标点击某个d区域时,显示不同的内容。
先来看一下效果图：
在这里插入图片描述
具体思路:

html和css就不细说了，自己随便搭一个测试用就行
①tab栏和内容栏要匹配，方法很多，我用的是自定义属性，即attribute
②点击tab栏给他当前current的样式，先清除其他tab栏的样式，再给当前栏current样式，利用排他思想，即干掉所有人留下自己。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.tab {
				margin: auto 0;
			}

			.tab_list ul {
				width: 640px;
				margin: auto;
			}

			.tab_list li {
				float: left;
				height: 40px;
				width: 80px;
				padding: 0 20px;
				line-height: 40px;
				text-align: center;
				list-style: none;
				display: inline-block;
				cursor: pointer;
				background-color: #c1c1c150;
			}

			.tab_list li:hover {
				color: #e73b19;
			}

			.tab_list .current {
				background-color: #D13617;
				color: #FAEBD7;
			}

			.tab_con {
				display: block;

			}

			.tab_con {
				padding-top: 50px;
				text-align: center;
			}

			.tab_con .item {
				width: 600px;
				background-color: #8ADCFF;
				margin: auto;
				display: none;
				font-style:  ;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格和包装</li>
					<li>售后保障</li>
					<li>商品评价</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="tab_con">
				<div class="item" style="display: block;">规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装规格和包装装规格和包装规格和包装规格和包装规格和包装</div>
				<div class="item">测试内容2</div>
				<div class="item">测试内容3</div>
				<div class="item">测试内容4</div>
				<div class="item">测试内容5</div>
			</div>
		</div>

		<script type="text/javascript">
			// 1. 模块选项卡，点击某一个，当前底色变红色，其余不变且失去焦点不变(排他),修改类名的方式
			var tab_list = document.querySelector('.tab_list');
			var lis = tab_list.querySelectorAll('li');
			var items = document.querySelectorAll('.item');
			// 绑定点击事件
			for (var i = 0; i < lis.length; i++) {
				lis[i].setAttribute('index', i);
				lis[i].onclick = function() {
					for (let i = 0; i < lis.length; i++) {
						lis[i].className = '';
						// 用js改变css伪类
					}
					document.styleSheets[0].addRule('.tab_list li:hover', 'color:#d04f1c;');
					this.className = 'current';
					var index = this.getAttribute('index');
					for (let i = 0; i < lis.length; i++) {
						items[i].style.display = 'none';
					}		
					items[index].style.display = 'block';
				}
			}
		</script>
	</body>
</html>

总结一下:本次案例
①getattribute自定义属性来匹配tab栏和内容栏

var index = this.getAttribute('index');

getAttribute()和对象属性的方法对比：getAttribute()可以得到自定义属性，而对象属性获取只能本身存在的属性，也就是自定义获取不了

②排他思想，先全部取消再单独设置，两层for循环

//先干掉所有人
for (let i = 0; i < lis.length; i++) {
						lis[i].className = '';
					}
//再设置自己
this.className = 'current';

③addRule可以在js中识别html标签,如下方代码块

document.styleSheets[0].addRule('.tab_list li:hover', 'color:#d04f1c;');