Tab切换
点击触发对应事件，显示相应内容。在网页中有很多场景应用，所以介绍几种方法，并记录记忆。
css样式
<style>
*{margin: 0;padding: 0;list-style-type: none;}.box{width: 500px;height: 500px;/* background-color: aqua; */margin: 0 auto;}.box ul{/* 弹性模型 */display:flex;justify-content:space-evenly;background:pink;}.box ul li{height: 50px;float: left;text-align: center;line-height: 50px;}/* 隐藏其他2个li */.box ol li{display:none;}/* 显示第一个li，第一张图 */.box ol li.active{display: block;}img{width: 100%;}
样式有点粗糙，又不是不能用，嘿嘿。
html代码
<body><divclass="box"><ul><liclass="on">图1</li><li>图2</li><li>图3</li></ul><ol><liclass="active"><ahref="#"><imgsrc="./image/1.jpg"alt=""></a></li><li><ahref="#"><imgsrc="./image/2.jpg"alt=""></a></li><li><ahref="#"><imgsrc="./image/3.jpg"alt=""></a></li></ol></div></body>
注：这里的图片自己找几张，命名1.jpg ，2.jpg ,3.jpg ...
JS代码
第一种：通过循环来设置类名，修改样式，由display来隐藏显示
<script>// 获取ul下所有的livar list=document.querySelectorAll('.box ul li')// 获取ol下所有的livar olist=document.querySelectorAll('.box ol li')for(var i=0;i<list.length;i++){// 自调用函数(function(i){
list[i].onclick=function(){// 去掉ul中li的类名for(var j=0;j<list.length;j++){
list[j].className=''}// 点击那个li设置 类名this.className='on'// 去掉ol中所有li的类名for(var j=0;j<olist.length;j++){
olist[j].className=''}// 当前li对应的图片所在的li设置 active类名
olist[i].className='active'}})(i)}
第二种：定义变量存储，去掉类名，点击那个li，就给相应类名。（多了变量存储，感觉复杂了点咳咳）
// 获取ul下所有的livar list=document.querySelectorAll('.box ul li')// 获取ol下所有的livar olist=document.querySelectorAll('.box ol li')// 定义2个变量获取ul ol中的带类名的li，也就是第一个livar oneulli =document.querySelector('.box ul li.on')// console.log(oneulli) //输出： <li class="on">图1</li>var oneolli =document.querySelector('.box ol li.active')for(var i=0;i<list.length;i++){(function(i){// 点击事件
list[i].onclick=function(){// 去掉li带的on类名
oneulli.className=''// this表示这个点击事件，点击那个li就给li一个 on类名this.className='on'// 带有on类名的li，存在上面定义的oneulli中
oneulli=this//ol也是差不多操作// 带active类名去掉
oneolli.className=''// 给当前li对应的图片所在的li添加active类名
olist[i].className='active'// 带有active类名，就存在oneolli变量中
oneolli = olist[i]}})(i)}
效果图：
这几天学习对象事件，做练习，做练习，就没空整理，星期看看整理出来吧，做练习做到头皮发麻，一度陷入无限轮回现在懂多了。这个Tab切换，还有挺多写法，但是我没看到，就不丢人了
本文转载自: https://blog.csdn.net/weixin_51346866/article/details/123723745
版权归原作者 Yan阿清 所有， 如有侵权，请联系我们删除。
版权归原作者 Yan阿清 所有， 如有侵权，请联系我们删除。