JavaScript實(shí)現(xiàn)選項(xiàng)卡效果的分析及步驟
慕課網(wǎng)上JavaScript進(jìn)階課最后一個編程挑戰(zhàn)，自己也是邊做邊搜，希望通過最后這個自己的總結(jié)加深對節(jié)點(diǎn)獲取方法的了解。
下面話不多說了，來一起看看詳細(xì)的介紹吧
效果分析之HTML結(jié)構(gòu)
整個結(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萬購昌平鄰鐵三居 總價(jià)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è)計(jì)<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> 獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價(jià)248萬<br> </div> </div>
效果是這樣滴，
效果實(shí)現(xiàn)之CSS
這里的效果，比較難想到的就是邊框的變化了，做的時候想到兩個辦法：
列表底部設(shè)置邊框border-bottom，然后每個li設(shè)置背景白色，底部邊框?yàn)闊o，從而起到 遮擋列表ul底部邊框的作用。
每個內(nèi)容盒子設(shè)置頂部邊框border-top，然后每個li設(shè)置背景白色，底部邊框?yàn)闊o，當(dāng)點(diǎn)擊標(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;
}`
效果基本實(shí)現(xiàn)了，接下來做內(nèi)容塊！
按照之前的思路，每個盒子設(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上添加一個類名為on，為了更好的配后之后的js添加點(diǎn)擊事件，我同時設(shè)置on類的樣式：
#tab ul li.on{
height: 30px;
border:2px solid saddlebrown;
border-bottom: none;
background:#fff;
}
除此之外，我們希望點(diǎn)擊哪個標(biāo)題就出現(xiàn)相關(guān)標(biāo)題的內(nèi)容塊，其他內(nèi)容塊隱藏，默認(rèn)狀態(tài)下第二個和第三個內(nèi)容塊是隱藏的，所以在這兩個盒子上添加類名hide，同時設(shè)置hide類的樣式：
.hide { display:none; }
交互效果之JavaScript
首先是標(biāo)題塊點(diǎn)擊效果—>給每個li添加鼠標(biāo)點(diǎn)擊事件：當(dāng)某個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)題時只顯示對應(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]來獲取被點(diǎn)擊標(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 = "";
}
}
到這里，題目要求的所有效果都實(shí)現(xiàn)了，回頭看看，感覺不是很難，但是當(dāng)時在剛看到題目的時候還是很懵的，不知道如何獲取被點(diǎn)擊的標(biāo)題（想到了冒泡和捕獲，后面還需要對這個進(jìn)行學(xué)習(xí)）,不知道如何設(shè)置css....，自己還需要更多的學(xué)習(xí)。
——————————分割線—————
很多大佬都指導(dǎo)我說之前的方法耗內(nèi)存：用for循環(huán)給每個li都添加一個點(diǎn)擊事件。下面，我用事件委托來更新一下這個辦法：
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獲取所點(diǎn)擊的li的屬性值
divs[target.getAttribute("data-index")].className = "";
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。
- js實(shí)現(xiàn)簡單的可切換選項(xiàng)卡效果
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
- 一個js封裝的不錯的選項(xiàng)卡效果代碼
- JS實(shí)現(xiàn)滑動菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
- JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果
- JS+DIV+CSS排版布局實(shí)現(xiàn)美觀的選項(xiàng)卡效果
- JS+CSS實(shí)現(xiàn)的經(jīng)典tab選項(xiàng)卡效果代碼
- JS實(shí)現(xiàn)的最簡Table選項(xiàng)卡效果
- javascript橫排豎排標(biāo)準(zhǔn)選項(xiàng)卡效果代碼
- javascript+css 新聞顯示tab 選項(xiàng)卡效果
相關(guān)文章
在?JavaScript?中使用變量或常量之前，必須先進(jìn)行聲明，這篇文章主要介紹了JavaScript中的變量聲明與賦值,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
JavaScript中的另一個機(jī)制：cookie，則可以達(dá)到真正全局變量的要求。 cookie是瀏覽器 提供的一種機(jī)制，它將document 對象的cookie屬性提供給JavaScript?？梢杂蒍avaScript對其進(jìn)行控制，而并不是JavaScript本身的性質(zhì)。2008-05-05
引用其它js時如何同時處理多個window.onload事件
引用其它js時，其js卻使用了window.onload事件，這樣的話，引入的頁面的onload事件就有可能執(zhí)行不了，那么該如何解決呢？祥看下文2014-09-09
這篇文章主要為大家詳細(xì)介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
因?yàn)閜hp的print_r比較好用同時js卻沒有這個功能于是自己就寫了一個，感興趣的你可不要錯過了哈，希望本文對你提高知識有所幫助2013-02-02
JS中split()用法（將字符串按指定符號分割成數(shù)組）
這篇文章主要介紹了JS中split()用法（將字符串按指定符號分割成數(shù)組）的相關(guān)資料,非常不錯具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
本篇文章主要是對Ajax提交與傳統(tǒng)表單提交的區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JavaScript中關(guān)于字符串替換與截取的知識點(diǎn)匯總
在日常開發(fā)中，經(jīng)常遇到針對字符串的替換、截取，知識點(diǎn)比較碎容易混淆，所以本文為大家整理了一下相關(guān)的知識點(diǎn)，希望對大家有所幫助2023-05-05
JavaScript通過select動態(tài)更換圖片的方法
這篇文章主要介紹了JavaScript通過select動態(tài)更換圖片的方法,涉及javascript動態(tài)操作圖片src的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript組合拼接字符串的效率對比測試,本文測試了IE6、Firefox、Mozilla、Netscape、Opera等瀏覽器,需要的朋友可以參考下2014-11-11