如何详细分析并步骤化实现JavaScript选项卡效果？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1878个文字，预计阅读时间需要8分钟。
在《JavaScript进阶课》的最后一个编程挑战中，我尝试了自己动手搜索和解决问题。希望通过这个总结，加深对获取节点方法的理解。
具体来说，我学习了如何使用DOM操作来选取和操作HTML元素。以下是一些关键点：
1. 获取元素：使用`document.getElementById()`、`document.querySelector()`等方法可以根据ID或CSS选择器找到元素。
2.元素属性操作：可以通过`.innerHTML`、`.textContent`等属性来获取或设置元素的文本内容。
3.事件处理：使用`addEventListener()`方法可以为元素添加事件监听器，如点击、鼠标悬停等。
4.动态内容：通过JavaScript动态创建和修改HTML内容，实现更丰富的交互效果。
通过这个挑战，我深入理解了以下概念：
- DOM操作：理解DOM（文档对象模型）如何工作，以及如何通过JavaScript与之交互。
- 事件循环：了解事件如何触发，以及JavaScript如何处理事件队列。- 性能优化：认识到过度使用DOM操作可能影响页面性能，学会使用更高效的方法。总结来说，这个挑战让我对JavaScript的DOM操作有了更深入的理解，并掌握了在实际项目中应用这些知识的方法。
慕课网上JavaScript进阶课最后一个编程挑战，自己也是边做边搜，希望通过最后这个自己的总结加深对节点获取方法的了解。
下面话不多说了，来一起看看详细的介绍吧
效果分析之HTML结构
整个结构由上至下分为两部分，标题块使用列表的方式来做，内容快使用盒子模型。其中，内容块中的内容为了实现换行效果，采用了<br>，其实这里每一行用<p>也是可以的（不知道怎么用css实现的我）。
<div id="tab"> <ul class="tit"> <li>房产</li> <li>家居</li> <li>二手房</li> </ul> <div> 275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br> </div> <div> 40平出租屋大改造 美少女的混搭小窝<br> 经典清新简欧爱家 90平老房焕发新生<br> 新中式的酷色温情 66平撞色活泼家居<br> 瓷砖就像选好老婆 卫生间烟道的设计<br> </div> <div> 通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万<br> </div> </div>
效果是这样滴，
效果实现之CSS
这里的效果，比较难想到的就是边框的变化了，做的时候想到两个办法：
列表底部设置边框border-bottom，然后每个li设置背景白色，底部边框为无，从而起到 遮挡列表ul底部边框的作用。
每个内容盒子设置顶部边框border-top，然后每个li设置背景白色，底部边框为无，当点击标题块的时候，用li的背景色去遮挡内容盒子对应部分的边框。
下面是采取第一种方法的css:
*{ margin: 0; padding: 0; } #tab{ width:290px; /*padding:5px;*/ height:150px; margin:20px; } #tab ul{ list-style:none; /*display: block;*/ height:30px; line-height:30px; border-bottom:2px saddlebrown solid; } #tab ul li{ display: inline-block; cursor: pointer; list-style: none; height: 28px; width: 60px; line-height: 28px margin:0 5px; text-align: center; border: 2px solid #aaa; border-bottom: none; }`
效果基本实现了，接下来做内容块！
按照之前的思路，每个盒子设置边框，但是上边框为无。
#tab div{ font-size: 14px; height:120px; line-height: 25px; border:2px solid saddlebrown; border-top: none; padding:5px; }
内容块实现的效果！
到这里，样式设置基本完成，但是根据效果要求，“房产”标题块是默认被点击的状态，所以我在改标题的li上添加一个类名为on，为了更好的配后之后的js添加点击事件，我同时设置on类的样式：
#tab ul li.on{ height: 30px; border:2px solid saddlebrown; border-bottom: none; background:#fff; }
除此之外，我们希望点击哪个标题就出现相关标题的内容块，其他内容块隐藏，默认状态下第二个和第三个内容块是隐藏的，所以在这两个盒子上添加类名hide，同时设置hide类的样式：
.hide { display:none; }
交互效果之JavaScript
首先是标题块点击效果—>给每个li添加鼠标点击事件：当某个li被点击，当前li的类名为on，其他li的类名为空。
var lis = document.getElementsByTagName("li"); //console.log(divs) for(let i=0; i<lis.length; i++){ lis[i].onclick = function() { for( let n=0; n<lis.length; n++){ lis[n].className = ""; } this.className = "on"; } }
接下来是内容块的设置，如何设置当点击标题时只显示对应的内容块呢？他们有什么共同之处可以使得内容和标题绑在一起呢？假设给他们排序的化，标题一对应内容一，标题二对应内容二，所以这里使用了index，
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这个位置我们也是可以设置的。在给每个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 = "";
源码链接
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对自由互联的支持。
本文共计1878个文字，预计阅读时间需要8分钟。
在《JavaScript进阶课》的最后一个编程挑战中，我尝试了自己动手搜索和解决问题。希望通过这个总结，加深对获取节点方法的理解。
具体来说，我学习了如何使用DOM操作来选取和操作HTML元素。以下是一些关键点：
1. 获取元素：使用`document.getElementById()`、`document.querySelector()`等方法可以根据ID或CSS选择器找到元素。
2.元素属性操作：可以通过`.innerHTML`、`.textContent`等属性来获取或设置元素的文本内容。
3.事件处理：使用`addEventListener()`方法可以为元素添加事件监听器，如点击、鼠标悬停等。
4.动态内容：通过JavaScript动态创建和修改HTML内容，实现更丰富的交互效果。
通过这个挑战，我深入理解了以下概念：
- DOM操作：理解DOM（文档对象模型）如何工作，以及如何通过JavaScript与之交互。
- 事件循环：了解事件如何触发，以及JavaScript如何处理事件队列。- 性能优化：认识到过度使用DOM操作可能影响页面性能，学会使用更高效的方法。总结来说，这个挑战让我对JavaScript的DOM操作有了更深入的理解，并掌握了在实际项目中应用这些知识的方法。
慕课网上JavaScript进阶课最后一个编程挑战，自己也是边做边搜，希望通过最后这个自己的总结加深对节点获取方法的了解。
下面话不多说了，来一起看看详细的介绍吧
效果分析之HTML结构
整个结构由上至下分为两部分，标题块使用列表的方式来做，内容快使用盒子模型。其中，内容块中的内容为了实现换行效果，采用了<br>，其实这里每一行用<p>也是可以的（不知道怎么用css实现的我）。
<div id="tab"> <ul class="tit"> <li>房产</li> <li>家居</li> <li>二手房</li> </ul> <div> 275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br> </div> <div> 40平出租屋大改造 美少女的混搭小窝<br> 经典清新简欧爱家 90平老房焕发新生<br> 新中式的酷色温情 66平撞色活泼家居<br> 瓷砖就像选好老婆 卫生间烟道的设计<br> </div> <div> 通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万<br> </div> </div>
效果是这样滴，
效果实现之CSS
这里的效果，比较难想到的就是边框的变化了，做的时候想到两个办法：
列表底部设置边框border-bottom，然后每个li设置背景白色，底部边框为无，从而起到 遮挡列表ul底部边框的作用。
每个内容盒子设置顶部边框border-top，然后每个li设置背景白色，底部边框为无，当点击标题块的时候，用li的背景色去遮挡内容盒子对应部分的边框。
下面是采取第一种方法的css:
*{ margin: 0; padding: 0; } #tab{ width:290px; /*padding:5px;*/ height:150px; margin:20px; } #tab ul{ list-style:none; /*display: block;*/ height:30px; line-height:30px; border-bottom:2px saddlebrown solid; } #tab ul li{ display: inline-block; cursor: pointer; list-style: none; height: 28px; width: 60px; line-height: 28px margin:0 5px; text-align: center; border: 2px solid #aaa; border-bottom: none; }`
效果基本实现了，接下来做内容块！
按照之前的思路，每个盒子设置边框，但是上边框为无。
#tab div{ font-size: 14px; height:120px; line-height: 25px; border:2px solid saddlebrown; border-top: none; padding:5px; }
内容块实现的效果！
到这里，样式设置基本完成，但是根据效果要求，“房产”标题块是默认被点击的状态，所以我在改标题的li上添加一个类名为on，为了更好的配后之后的js添加点击事件，我同时设置on类的样式：
#tab ul li.on{ height: 30px; border:2px solid saddlebrown; border-bottom: none; background:#fff; }
除此之外，我们希望点击哪个标题就出现相关标题的内容块，其他内容块隐藏，默认状态下第二个和第三个内容块是隐藏的，所以在这两个盒子上添加类名hide，同时设置hide类的样式：
.hide { display:none; }
交互效果之JavaScript
首先是标题块点击效果—>给每个li添加鼠标点击事件：当某个li被点击，当前li的类名为on，其他li的类名为空。
var lis = document.getElementsByTagName("li"); //console.log(divs) for(let i=0; i<lis.length; i++){ lis[i].onclick = function() { for( let n=0; n<lis.length; n++){ lis[n].className = ""; } this.className = "on"; } }
接下来是内容块的设置，如何设置当点击标题时只显示对应的内容块呢？他们有什么共同之处可以使得内容和标题绑在一起呢？假设给他们排序的化，标题一对应内容一，标题二对应内容二，所以这里使用了index，
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这个位置我们也是可以设置的。在给每个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 = "";
源码链接
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对自由互联的支持。