简易js原生tap选项卡
tap选项卡我们可以在各大网站遇见，今天说一下js原生实现tap选项卡。
首先我们要完成的效果图，如下：点击导航栏不同项的时候通过不刷新页面以及不加载其他页面实现内容的切换。
通过应用jQuery框架$(":eq(index)")方法可以轻而易举的实现这个功能，当然要先引入jQuery文件
<div class="row"><ul><li class="nav current">one</li><li class="nav">two</li><li class="nav">three</li><li class="nav">four</li></ul></div><div class="cent"><div class="main active">one</div><div class="main">two</div><div class="main">three</div><div class="main">four</div></div><script>$(function () {$(".row>ul>li").on("click",function () {$(this).siblings("li").removeClass("current");$(this).addClass("current");var index = $(this).index();$(".cent>div:eq("+index+")").siblings("div").removeClass("active");$(".cent>div:eq("+index+")").addClass("active");});});</script>
现在我们说一下用js原生实现
首先先把页面结构写出来，这个没什么好说的
//css样式<style>.row ul{width: 500px;height: 100px;margin: auto;}.row ul li{list-style: none;float: left;padding: 0 30px;}.row #tap div{clear:both;display: none;}.row ul li a.current{background: red;line-height: 20px;vertical-align: middle;}.row #tap .active{display: block;width: 100px;height: 100px;margin: auto;}</style>//网页结构<div class="row"><ul id="ul"><li><a class="current" href="javascript:void(0)">one</a></li><li><a href="javascript:void(0)">tow</a></li><li><a href="javascript:void(0)">three</a></li><li><a href="javascript:void(0)">four</a></li></ul><div id="tap"><div class="active">one</div><div>tow</div><div>three</div><div>four</div></div></div>
接下来就是js代码的书写了，书写之前我们先理一下思路
1、我们要获取到导航栏所有的节点；
2、给节点添加onclickk点击事件；
3、当节点触发点击事件，当前节点背景高亮显示其他兄弟节点取消背景高亮，并且显示对应栏目内容
<script>let oUl = document.getElementById("ul");let oLis = oUl.getElementsByTagName('li');//获取所有li节点以及 li 下 a 节点for (let i=0;i<oUl.children.length;i++){let oLi = oUl.children[i];let oA = oLi.children[0];//获取li元素的下标，通过indexOf()方法直接获取会显示不存在，所以可以通过oLis.index 添加属性方法给li设置相应的下标值，oLis[i].index = i;//给 a 元素添加点击事件；如果说把事件函数放置于循环内部内存会过多创建不利于性能，所以可以把公共函数放在循环外部；但注意在引用的时候不能带（），带了（）就不是引用函数了而是赋值函数执行结果oA.onclick = fnc;}//点击触发函数function fnc() {for (let i=0;i<oUl.children.length;i++){let oLi = oUl.children[i];let oA = oLi.children[0];//遍历去除所以a元素上的classoA.className = "";}//给当前点击元素添加classthis.className = "current"；//获取点击元素父节点下标值，即对应li下标值let liIndex = this.parentNode.index;//获取显示区域boxlet oTap = document.getElementById('tap');let oDivs = oTap.getElementsByTagName("div");for (let j = 0; j < oTap.children.length;j++){oDiv = oTap.children[j];//同 li 设置下标值oDivs[j].index = j;//清空所有显示模块的class值oDiv.className = "";//通过对比下标值，如果 li 下标值与 div 模块下标值对应，给对应 div 模块添加classif (liIndex === oDivs[j].index){oTap.children[oDivs[j].index].className = "active";}}}</script>
如果觉得《js原生实现简易tap选项卡》对你有帮助，请点赞、收藏，并留下你的观点哦！
