JavaScript实现选项卡效果的分析及步骤

来源：动视网责编：小采时间：2020-11-27 21:58:43

JavaScript实现选项卡效果的分析及步骤

JavaScript实现选项卡效果的分析及步骤: 慕课网上JavaScript进阶课最后一个编程挑战，自己也是边做边搜，希望通过最后这个自己的总结加深对节点获取方法的了解。下面话不多说了，来一起看看详细的介绍吧效果分析之HTML结构整个结构由上至下分为两部分，标题块使用列表的方式来做，内容快使用

推荐度：

点击下载本文 文档为doc格式

导读JavaScript实现选项卡效果的分析及步骤: 慕课网上JavaScript进阶课最后一个编程挑战，自己也是边做边搜，希望通过最后这个自己的总结加深对节点获取方法的了解。下面话不多说了，来一起看看详细的介绍吧效果分析之HTML结构整个结构由上至下分为两部分，标题块使用列表的方式来做，内容快使用

这个位置我们也是可以设置的。在给每个li添加事件的时候用到了for里面的参数i在这里表示0，1，2可以表示标题块之间的相对位置（lis[i].index = i)，这也正是盒子块之间的相对位置。我们可以通过divs[this.index]来获取被点击标题对应的盒子。

var divs = document.getElementById("tab").getElementsByTagName("div");
//console.log(divs)
 for(let i=0; i<lis.length; i++){
 lis[i].index = i;
 lis[i].onclick = function() {
 	for( let n=0; n<lis.length; n++){
 	lis[n].className = "";
 	divs[n].className = "hide";
 	}
 	this.className = "on";
 	divs[this.index].className = "";
 	}
 }

到这里，题目要求的所有效果都实现了，回头看看，感觉不是很难，但是当时在刚看到题目的时候还是很懵的，不知道如何获取被点击的标题（想到了冒泡和捕获，后面还需要对这个进行学习）,不知道如何设置css....，自己还需要更多的学习。

——————————分割线—————

很多大佬都指导我说之前的方法耗内存：用for循环给每个li都添加一个点击事件。下面，我用事件委托来更新一下这个办法：

window.onload = function() {
 var uls = document.getElementById('tit');
 var lis = uls.getElementsByTagName('li');
 var divs = document.getElementById('tab').getElementsByTagName('div');
 // console.log(lis)
 console.log(divs)
 uls.onclick = function(ec) {
 for(let i=0; i<lis.length; i++){
 lis[i].className = ""; //遍历每个li设置类名
 divs[i].className = "hide"; 
 }
 var ev = ev || window.event;
 var target = ev.target || ev.srcElement;
 if(target.nodeName.toLowerCase() == 'li'){
 target.className = "on";
 //自己在每个li中定义了一个属性 data-index
 divs[target.getAttribute("data-index")].className = ""; 
 console.log(target);
 }
 } 
 }

我在html中给每个li自定了属性data-index：

<li class="on" data-index="0">房产</li>
<li data-index="1">家居</li>	
<li data-index="2">二手房</li>

再在js中用getAttribute获取所点击的li的属性值

divs[target.getAttribute("data-index")].className = "";

源码链接

总结

JavaScript实现选项卡效果的分析及步骤

推荐度：

点击下载本文 文档为doc格式

标签：方法过程实现

热门焦点

JavaScript实现选项卡效果的分析及步骤

JavaScript实现选项卡效果的分析及步骤

JavaScript实现选项卡效果的分析及步骤

最新推荐

猜你喜欢

热门推荐