本文详细解析了使用JavaScript实现选项卡效果的完整步骤，涵盖HTML结构设计、CSS样式处理及JS交互逻辑。重点介绍了通过索引绑定标题与内容块的方法，并对比了传统循环绑定与事件委托两种实现方式，旨在帮助开发者深入理解节点获取与事件处理机制。
JavaScript实现选项卡效果的分析及步骤
本文基于慕课网JavaScript进阶课程的最后一个编程挑战进行总结。作者通过边做边搜的方式，旨在通过此案例加深对节点获取方法的理解。
以下是详细的介绍内容。
HTML结构效果分析
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效果实现
CSS效果实现
该效果中较难想到的是边框的变化处理，实现时想到了两种方法：
在列表底部设置边框border-bottom，然后为每个li设置白色背景且底部无边框，从而利用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
交互效果之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 = "";源码链接
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对本站的支持。