海量开放在线课程中在线JavaScript高级课程的最后一个编程挑战是边做边搜。希望通过这最后的总结，加深对节点获取方法的理解。

下面就不多说了，我们来看看详细的介绍

效果分析的HTML结构

整个结构从上到下分为两部分。标题栏以列表的形式制作，内容以方框模型制作。其中，内容块中的内容采用br，以实现换行效果。其实这里每一行也可以用P(不知道用css怎么实现)。

Div ID=' tab ' ul class=' tit ' liReal Estate/Lili Home/Lili二手房/Li/ul Div 2，750，000买昌平邻铁三房总价200，000买一房br 2亿买五环三房140万居东三环br北京首套零首付房产530，000买东五环50平br北京房产直降5000中信大厦公园大厦王显芳br/Div div 40平出租屋，大翻新，美少女混搭窝br经典清新简约欧式爱家90平老屋，返老还童br新中式冷色系温馨66平撞色活泼家居br瓷砖就像选老婆的浴室烟道设计br /div通州豪宅3套住宅260万二环稀缺2套住宅250w甩br西三环透明2套住宅290万130万2套住宅限购br皇城根小学小区仅260万121套公寓70万扔！ Br专属别墅280万苏州桥2居室优惠价格248万br /div/div效果是这样的。

效果实现的CSS

这里的效果，很难想到是边界的变化。做的时候，我想到两种方法：

在列表底部设置边框-下边框，然后为每一个li设置背景白色，下边框为无，以遮挡列表ul的下边框。

为每个内容框设置顶部边框-顶部，然后为每个li设置背景白色，并将底部边框设置为无。单击标题栏时，使用li的背景色来遮挡内容框相应部分的边框。

下面是css:采用的第一种方法

* { margin : 0；padd : 0；} # tab { width:290px/* padd :5 px；*/height :150 px；margin:20px} # tab ul { list-style : none；/*display:块；*/height :30 px；线高：30 px；border-bottom:2px鞍形棕色固体；} # tab ul Li { display : inline-block；cursor:指针；list-style:无；高度： 28px；宽度： 60px；线高： 28px余量：0 5px；文本对齐：中心；border: 2px实心# aaaborder-bottom:无；} `效果基本实现，再做内容块！

按照之前的思路，每个框都设置了边框，但是顶边框是没有的。

# tab div { font-size : 14px；高度：120 px；线高： 25px；border:2px实心鞍形棕色；border-top:无；padding:5px}内容块的效果！

至此，样式设置基本完成，但根据效果要求，默认点击“real estate”的标题栏，所以我在标题上添加了一个名为on的类名——改li。为了更好地匹配事件后js的click事件，我还设置了on类的样式：

# tab ul li.on { height: 30pxborder:2px实心鞍形棕色；border-bottom:无；背景# fff}另外，我们希望在点击哪个标题时，相关标题的内容块会出现，其他内容块是隐藏的。默认情况下，第二个和第三个内容块是隐藏的，因此将类名hide添加到这两个框中，并设置hide class的样式：隐藏{ display:none}

具有交互效果的JavaScript

第一个是标题栏点击效果——给每个li添加一个鼠标点击事件：点击一个li时，当前li的类名为on，其他li的类名为空。

var lis=document . getelementsbytagname(' Li ')；//console.log(divs)for(让I=0；长度；i ){ lis[i]。onclick=function() { for(让n=0；nlis.lengthn ){ lis[n]。className=} this.className=' on} }

接下来是内容块的设置。如何设置点击标题时只显示对应的内容块？他们有什么共同点把内容和标题联系起来？假设它们被排序，标题一对应于内容一，标题二对应于内容二，所以这里使用索引。

index()方法返回指定元素相对于其他指定元素的索引位置。

我们也可以设置这个位置。当向每个li添加事件时，将使用中的参数I。这里，0、1和2可以表示头块之间的相对位置(lis[i])。index=i)，这也是方块块之间的相对位置。我们可以通过divs[this.index]获得与点击的标题对应的框。

var divs=document . getelementbyid(' tab ')。getElementsByTagName(' div ')；//console.log(divs) for(让I=0；长度；i ){ lis[i]。索引=I；lis[i]。onclick=function() { for(让n=0；nlis.lengthn ){ lis[n]。className=divs[n]。className=' hide} this.className=' ondivs[this.index]。className=}}在这里，标题要求的所有效果都达到了。回头看，并没有觉得很难，但第一次看到标题的时候还是很迷茫。我不知道如何获得点击的标题(我想到了冒泡和捕获，我需要稍后学习这一点)。我不知道如何设置css.我需要了解更多。

——————33543354335433333333——分界线——3——-

许多老板告诉我，以前的方法消耗内存：用for循环给每个li添加一个click事件。下面，我使用事件委托来更新这个方法：

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(div s)uls . onclick=function(EC){ for(let I=0；长度；i ){ lis[i]。className=//遍历每个li设置类名div[I]。className=' hide} var ev=ev | | window.eventvar target=ev . target | | ev . srcelelement；if(target . nodename . tolowercase()==' Li '){ target . class name=' on '；//我定义了一个属性数据索引divs[target . getattribute(' data-index ')]。类名=' '在每个li中；console.log(目标)；}}}我在html中为每个li定制了属性数据索引：

Li class=' on ' data-index=' 0 ' real estate/Lili data-index=' 1 ' home/Lili data-index=' 2 '二手房/Li用js中的getAttribute设置被点击的Li的属性值

div s[target . GetAttribute(' data-index ')]。className=源链接

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。