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

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

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

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

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

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

效果是這樣滴，

效果實(shí)現(xiàn)之CSS

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

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

每個(gè)內(nèi)容盒子設(shè)置頂部邊框border-top，然后每個(gè)li設(shè)置背景白色，底部邊框?yàn)闊o，當(dāng)點(diǎn)擊標(biāo)題塊的時(shí)候，用li的背景色去遮擋內(nèi)容盒子對(duì)應(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;
 }`

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

按照之前的思路，每個(gè)盒子設(shè)置邊框，但是上邊框?yàn)闊o。

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

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

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

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

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

.hide { display:none; }

交互效果之JavaScript

首先是標(biāo)題塊點(diǎn)擊效果—>給每個(gè)li添加鼠標(biāo)點(diǎn)擊事件：當(dāng)某個(gè)li被點(diǎn)擊，當(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)點(diǎn)擊標(biāo)題時(shí)只顯示對(duì)應(yīng)的內(nèi)容塊呢？他們有什么共同之處可以使得內(nèi)容和標(biāo)題綁在一起呢？假設(shè)給他們排序的化，標(biāo)題一對(duì)應(yīng)內(nèi)容一，標(biāo)題二對(duì)應(yīng)內(nèi)容二，所以這里使用了index，

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

這個(gè)位置我們也是可以設(shè)置的。在給每個(gè)li添加事件的時(shí)候用到了for里面的參數(shù)i在這里表示0，1，2可以表示標(biāo)題塊之間的相對(duì)位置（lis[i].index = i)，這也正是盒子塊之間的相對(duì)位置。我們可以通過divs[this.index]來獲取被點(diǎn)擊標(biāo)題對(duì)應(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 = "";
 	}
 }	

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

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

很多大佬都指導(dǎo)我說之前的方法耗內(nèi)存：用for循環(huán)給每個(gè)li都添加一個(gè)點(diǎn)擊事件。下面，我用事件委托來更新一下這個(gè)辦法：

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 = ""; //遍歷每個(gè)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";
   //自己在每個(gè)li中定義了一個(gè)屬性 data-index
   divs[target.getAttribute("data-index")].className = ""; 
   console.log(target);
  }
  } 
 }

我在html中給每個(gè)li自定了屬性data-index：

<li class="on" data-index="0">房產(chǎn)</li>
<li data-index="1">家居</li>	
<li data-index="2">二手房</li>

再在js中用getAttribute獲取所點(diǎn)擊的li的屬性值

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

源碼鏈接

總結(jié)

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

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

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

廣告

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