JavaScript實現(xiàn)選項卡效果的分析及步驟

創(chuàng)新互聯(lián)公司是專業(yè)的吉林網(wǎng)站建設(shè)公司，吉林接單;提供網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行吉林網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

慕課網(wǎng)上JavaScript進階課最后一個編程挑戰(zhàn)，自己也是邊做邊搜，希望通過最后這個自己的總結(jié)加深對節(jié)點獲取方法的了解。

下面話不多說了，來一起看看詳細的介紹吧

效果分析之HTML結(jié)構(gòu)

整個結(jié)構(gòu)由上至下分為兩部分，標(biāo)題塊使用列表的方式來做，內(nèi)容快使用盒子模型。其中，內(nèi)容塊中的內(nèi)容為了實現(xiàn)換行效果，采用了<br>，其實這里每一行用<p>也是可以的（不知道怎么用css實現(xiàn)的我）。

<div id="tab">
	<ul class="tit">
		<li>房產(chǎn)</li>
		<li>家居</li>	
		<li>二手房</li>
	</ul>
	<div> 
	275萬購昌平鄰鐵三居 總價20萬買一居<br>
 200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br>
 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br>
 京樓盤直降5000 中信府 公園樓王現(xiàn)房<br>
	</div>
 <div>
 40平出租屋大改造 美少女的混搭小窩<br>
 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br>
 新中式的酷色溫情 66平撞色活潑家居<br>
 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計<br>
 	</div>
 <div> 
 通州豪華3居260萬 二環(huán)稀缺2居250w甩<br>
 西3環(huán)通透2居290萬 130萬2居限量搶購<br>
 黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br>
 獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬<br>
 	</div>
</div>	

效果是這樣滴，

效果實現(xiàn)之CSS

這里的效果，比較難想到的就是邊框的變化了，做的時候想到兩個辦法：

列表底部設(shè)置邊框border-bottom，然后每個li設(shè)置背景白色，底部邊框為無，從而起到 遮擋列表ul底部邊框的作用。

每個內(nèi)容盒子設(shè)置頂部邊框border-top，然后每個li設(shè)置背景白色，底部邊框為無，當(dāng)點擊標(biāo)題塊的時候，用li的背景色去遮擋內(nèi)容盒子對應(yīng)部分的邊框。

下面是采取第一種方法的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;
 }`

效果基本實現(xiàn)了，接下來做內(nèi)容塊！

按照之前的思路，每個盒子設(shè)置邊框，但是上邊框為無。

#tab div{
 	font-size: 14px;
 height:120px;
 line-height: 25px;
 border:2px solid saddlebrown;
 border-top: none;
 padding:5px;
 }

內(nèi)容塊實現(xiàn)的效果！

到這里，樣式設(shè)置基本完成，但是根據(jù)效果要求，“房產(chǎn)”標(biāo)題塊是默認被點擊的狀態(tài)，所以我在改標(biāo)題的li上添加一個類名為on，為了更好的配后之后的js添加點擊事件，我同時設(shè)置on類的樣式：

 #tab ul li.on{
  	height: 30px;
  	border:2px solid saddlebrown;
  	border-bottom: none;
  	background:#fff;
  }

除此之外，我們希望點擊哪個標(biāo)題就出現(xiàn)相關(guān)標(biāo)題的內(nèi)容塊，其他內(nèi)容塊隱藏，默認狀態(tài)下第二個和第三個內(nèi)容塊是隱藏的，所以在這兩個盒子上添加類名hide，同時設(shè)置hide類的樣式：

.hide { display:none; }

交互效果之JavaScript

首先是標(biāo)題塊點擊效果—>給每個li添加鼠標(biāo)點擊事件：當(dāng)某個li被點擊，當(dāng)前l(fā)i的類名為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";
 }
}	

接下來是內(nèi)容塊的設(shè)置，如何設(shè)置當(dāng)點擊標(biāo)題時只顯示對應(yīng)的內(nèi)容塊呢？他們有什么共同之處可以使得內(nèi)容和標(biāo)題綁在一起呢？假設(shè)給他們排序的化，標(biāo)題一對應(yīng)內(nèi)容一，標(biāo)題二對應(yīng)內(nèi)容二，所以這里使用了index，

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

這個位置我們也是可以設(shè)置的。在給每個li添加事件的時候用到了for里面的參數(shù)i在這里表示0，1，2可以表示標(biāo)題塊之間的相對位置（lis[i].index = i)，這也正是盒子塊之間的相對位置。我們可以通過divs[this.index]來獲取被點擊標(biāo)題對應(yīng)的盒子。

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 = "";
 	}
 }	

到這里，題目要求的所有效果都實現(xiàn)了，回頭看看，感覺不是很難，但是當(dāng)時在剛看到題目的時候還是很懵的，不知道如何獲取被點擊的標(biāo)題（想到了冒泡和捕獲，后面還需要對這個進行學(xué)習(xí)）,不知道如何設(shè)置css....，自己還需要更多的學(xué)習(xí)。

——————————分割線—————

很多大佬都指導(dǎo)我說之前的方法耗內(nèi)存：用for循環(huán)給每個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設(shè)置類名
   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">房產(chǎn)</li>
<li data-index="1">家居</li>	
<li data-index="2">二手房</li>

再在js中用getAttribute獲取所點擊的li的屬性值

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

源碼鏈接

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁名稱：JavaScript實現(xiàn)選項卡效果的分析及步驟
網(wǎng)站地址：http://bm7419.com/article40/igsjho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、電子商務(wù)、網(wǎng)站策劃、商城網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)