JavaScript實現選項卡效果

牛肉燒酒發表於2019-04-06
JavaScript

JavaScript實現選項卡效果

慕課網上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>	
複製程式碼

效果是這樣滴，

JavaScript實現選項卡效果

效果實現之CSS

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

  • 列表底部設定邊框border-bottom，然後每個li設定背景白色，底部邊框為無，從而起到 遮擋列表ul底部邊框的作用。

JavaScript實現選項卡效果
JavaScript實現選項卡效果

  • 每個內容盒子設定頂部邊框border-top，然後每個li設定背景白色，底部邊框為無，當點選標題塊的時候，用li的背景色去遮擋內容盒子對應部分的邊框。

JavaScript實現選項卡效果

下面是採取第一種方法的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;
 }`
複製程式碼

效果基本實現了，接下來做內容塊！

JavaScript實現選項卡效果

按照之前的思路，每個盒子設定邊框，但是上邊框為無。

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

內容塊實現的效果！

JavaScript實現選項卡效果

到這裡，樣式設定基本完成，但是根據效果要求，“房產”標題塊是預設被點選的狀態，所以我在改標題的li上新增一個類名為on，為了更好的配後之後的js新增點選事件，我同時設定on類的樣式：

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

JavaScript實現選項卡效果

除此之外，我們希望點選哪個標題就出現相關標題的內容塊，其他內容塊隱藏，預設狀態下第二個和第三個內容塊是隱藏的，所以在這兩個盒子上新增類名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";
    }
}	
複製程式碼

JavaScript實現選項卡效果

接下來是內容塊的設定，如何設定當點選標題時只顯示對應的內容塊呢？他們有什麼共同之處可以使得內容和標題綁在一起呢？假設給他們排序的化，標題一對應內容一，標題二對應內容二，所以這裡使用了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....，自己還需要更多的學習。

相關文章