慕課網上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 = "";總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
