前端入坑紀 40
其實盼产，想寫這個主題已經(jīng)有很久了。只是礙于“難以描述”勺馆，而一直拖到現(xiàn)在戏售。
今天看來，覺得也差不多是時候了草穆！畢竟灌灾，之前很多代碼確實寫得有些繁瑣。
所以续挟，這次的主題更多是簡化語法的層面出發(fā)，而不是特效的制作侥衬。
由于是實際項目的截圖诗祸，所以比起我平時的素顏效果圖，顏值上是有很大提升的轴总。
那么直颅，走著！
OK怀樟，first things first功偿！項目鏈接
以后手機相關(guān)的頁面，都會上傳github github項目地址
真實項目截圖
HTML 結(jié)構(gòu)
<div class="mainWrp">
<div id="divHeds" class="clear">
<a class="on" href="javascript:;">所有</a>
<a href="javascript:;">未完成</a>
<a href="javascript:;">已完成</a>
</div>
<div id="divConts">
<div style="display:block">
<ul>
<li>
<a href="javascript:;">
<p>我的雞籠<br>電子兌換券</p>
<p><strong>50枚蛋兌換券</strong><br>有效期：2018年10月</p>
<em>50</em>
<span>枚</span>
</a>
</li>
<li class="muji">
<a href="javascript:;">
<p>我的雞籠<br>電子兌換券</p>
<p><strong>母雞一只兌換券</strong><br>有效期：2018年10月</p>
<em>1</em>
<span>只</span>
</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="javascript:;">
<p>我的雞籠<br>電子優(yōu)惠券</p>
<p><strong>50枚蛋優(yōu)惠券</strong><br>有效期：2018年10月</p>
<em>70</em>
<span>枚</span>
</a>
</li>
<li class="muji">
<a href="javascript:;">
<p>我的雞籠<br>電子優(yōu)惠券</p>
<p><strong>母雞一只優(yōu)惠券</strong><br>有效期：2018年10月</p>
<em>3</em>
<span>只</span>
</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="javascript:;">
<p>我的雞籠<br>電子優(yōu)惠券</p>
<p><strong>30枚蛋優(yōu)惠券</strong><br>有效期：2018年10月</p>
<em>80</em>
<span>枚</span>
</a>
</li>
<li class="muji">
<a href="javascript:;">
<p>我的雞籠<br>電子優(yōu)惠券</p>
<p><strong>母雞一只優(yōu)惠券</strong><br>有效期：2018年10月</p>
<em>8</em>
<span>只</span>
</a>
</li>
</ul>
</div>
</div>
</div>
div#divHeds 下面有三個a往堡，代表的就是點擊的三個標簽械荷。它們左浮動共耍，寬度各是33.333% 。而div#divConts下則有三個div吨瞎，對應三個a標簽的內(nèi)容痹兜。有興趣研究的同學，一定看出來了颤诀，我這個優(yōu)惠券都是用的絕對定位布局字旭。
CSS 結(jié)構(gòu)
* {
margin: 0;
padding: 0;
}
.mainWrp {
max-width: 640px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear::after {
content: "";
display: block;
width: 100%;
height: 0;
visibility: hidden;
clear: both;
}
#divHeds a {
text-decoration: none;
display: block;
position: relative;
width: 33.333%;
float: left;
line-height: 46px;
text-align: center;
font-size: 12px;
color: #9d9d9d;
border-bottom: 1px solid #e1e1e1;
}
#divHeds a.on {
color: #f15858;
border-bottom-color: #f15858;
}
#divConts {
margin: 6px 2%;
}
#divConts li {
background-image: linear-gradient(-180deg, #60e2cb 0%, #7efba0 100%);
border-radius: 6px;
margin-bottom: 12px;
overflow: hidden;
line-height: 0;
}
#divConts li a {
position: relative;
display: block;
color: #fff;
height: 126px;
background-image: url(wrap/img/bgtou01.png);
background-repeat: no-repeat;
background-size: auto 80px;
background-position: 100% 100%;
}
#divConts ul li.muji {
background-image: linear-gradient(-180deg, #ff87a3 0%, #ffb05b 99%);
}
#divConts ul li.muji a {
background-image: url(wrap/img/bgtou02.png);
}
#divConts li em {
position: absolute;
font-size: 100px;
top: 10px;
right: 26px;
line-height: 100px;
font-style: normal
}
#divConts li span {
position: absolute;
line-height: 20px;
font-size: 20px;
top: 6px;
right: 6px;
}
#divConts li p {
line-height: 17px;
}
#divConts li p:nth-child(1) {
position: absolute;
top: 12px;
left: 12px;
font-size: 13px;
}
#divConts li p:nth-child(2) {
position: absolute;
bottom: 12px;
left: 12px;
}
#divConts li p strong {
font-size: 16px;
}
#divConts div {
display: none
}
樣式就是那么一回事，背景里有個屬性特別長的是css3的線性漸變崖叫。
JS 結(jié)構(gòu)
// 獲取三個a標簽遗淳，和三個標簽對應的內(nèi)容
var navs = document.getElementById('divHeds').getElementsByTagName('a');
var conts = document.getElementById('divConts').getElementsByTagName('div');
var prevousOne = 0;// 上一個點擊的標簽，默認為第一個心傀。
// 三個標簽添加點擊事件
for (var i = 0; i < 3; i++) {
// 立即執(zhí)行函數(shù)屈暗，這樣就可以把運行中的i，以閉包形式存下來
! function(i) {
// 每個標簽點擊時剧包，隱藏上一個標簽內(nèi)容恐锦，除去上一個標簽的on，給當前的標簽加on疆液，給當前對應標簽內(nèi)容顯示出來
navs[i].onclick = function() {
navs[prevousOne].className = "";
conts[prevousOne].style.display = "none";
this.className = "on";
conts[i].style.display = "block";
prevousOne = i;// 將當前標簽的序號i保存下來
}
}(i)
}
- 相比以往給元素添加序號indx一铅，再讀取indx來確認順序。這里直接用閉包實現(xiàn)了indx順序的功能堕油。
- 相比每次寫個循環(huán)來清除全部元素的class on潘飘，這次直接用清除上一個元素的思路，來有針對性的清掉class on
好了掉缺，到此卜录，本文告一段落！感謝您的閱讀眶明！祝您和您的家人身體健康艰毒，闔家幸福！
