原生JS的tab切换实现

最新推荐文章于 2022-12-26 20:20:47 发布

xz暮霭沉沉楚天阔

最新推荐文章于 2022-12-26 20:20:47 发布

阅读量192

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/wxygxy/article/details/105605555

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先看效果图，知道我们要干什么：点击选项栏的第一个选项下方出现你要显示内容

（1）先开始布局

<body>
		<div>
			<!--上边的选项-->
			<ul>
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<!--下边的盒子-->
			<ol>
				<li class="active">我是第一个</li>
				<li>我是第二个</li>
				<li>我是第三个</li>
			</ol>
		</div>
	</body>

（2）css样式

* {
				margin: 0;
				padding: 0;
			}
			ul,
			ol,
			li {
				list-style: none;
			}
			div {
				margin: 30px auto;
				width: 600px;
				height: 400px;
				border: 2px solid black;
				display: flex;
				flex-direction: column;
			}
			ul {
				height: 60px;
				display: flex;
			}
			ul>li {
				flex: 1;
				display: flex;
				background: skyblue;
				justify-content: center;
				align-items: center;
				color: white;
				font-size: 40px;
			}

			/*当ul的li有类名 active 的时候,变颜色*/
			ul>li.active {
				background: pink;
			}

			ol {
				flex: 1;
				position: relative;
			}

			ol>li {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: cyan;
				color: white;
				font-size: 40px;
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}

			/*当ol的li有类名 active 的时候,出现盒子内容*/
			ol>li.active {
				display: flex;
			}

css这里用了弹性布局，弹性布局的相关内容另写一篇专门用来复习一下
说一下为什么只有一个li有class，因为我们希望只有点击的那个元素样式有变化，未点击的ul>li不变色，ol>li内容不出现，默认第一个显示
（3）

        const btn = document.querySelectorAll('ul>li');
		
		//		console.log(btn)
		const tabs = document.querySelectorAll('ol>li');

		btn.forEach(function(value, index) {
			// value就是ul下的每一个li
			// console.log(value)
			value.setAttribute('newIndex', index);
			
			value.addEventListener('mouseover', function() {
				btn.forEach(function(value, index) {
					value.className = '';
					tabs[index].className = '';
				})
				this.className = 'active';
				tabs[value.getAttribute('newIndex')].className = 'active';
			})
		})

解释一下JS代码的内容
首先获取所有ul的li：
const btn = document.querySelectorAll(‘ul>li’);
获取所有ol的li：
const tabs = document.querySelectorAll(‘ol>li’);
一开始变量我用的var但是学到后来已经开始用let和const了，这里为什么用const，是因为const是定义常量，也就是说不会变的量
此时的btn相当于是个数组，所以用forEach方法给他绑定事件，但是我们想一个问题，浏览器怎么知道你点击时它要显示第几个的内容

我们想一下，你点击第一个出来的是不是第一个的内容，点第二个是不是出来第二个的内容，所以我们知道啦------ul的li和ol的li的索引是配套的，那么我们给这个当前的 ul>li绑定一个设置一个属性作为标识符，让这个标识符可以在ol的li上使用，这不就解决了问题吗，我们就把索引为作为标识符，给这个标识符起个名字 newIndex

设置属性的方法是 ：setAttribute(要设置的属性名称，要设置的属性值)
value.setAttribute(‘newIndex’, index);
所以一开始的forEach可以理解为是为了设置标识符

接下来给每一个ul的li都绑定一个点击事件click或者鼠标移入事件mouseover，此时的forEach是为了让所有的ul>li和ol>li没有类名
value.addEventListener(‘mouseover’, function() {
btn.forEach(function(value, index) {
value.className = ‘’;
tabs[index].className = ‘’;
})

然后只有当前鼠标移入的选项才有类名，this就是当前的ul>li
this.className = ‘active’;
让ol的内容显示，要用到方法getAttribute(要获取的属性名称)，这个方法可以用来获取元素的所有属性，包括你定义的属性，因为我们之前定义了 newIndex ，这时候用在ol>li上就可以把ul和li联系起来啦
tabs[value.getAttribute(‘newIndex’)].className = ‘active’

完结，撒花✿✿ヽ(°▽°)ノ✿