前端入坑纪 40
其实，想写这个主题已经有很久了。只是碍于“难以描述”，而一直拖到现在。
今天看来，觉得也差不多是时候了！毕竟，之前很多代码确实写得有些繁琐。
所以，这次的主题更多是简化语法的层面出发，而不是特效的制作。
由于是实际项目的截图，所以比起我平时的素颜效果图，颜值上是有很大提升的。
那么，走着！
OK，first things first！项目链接
以后手机相关的页面，都会上传github github项目地址
真实项目截图
HTML 结构
<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>电子优惠券</p>
<p><strong>50枚蛋优惠券</strong><br>有效期：2018年10月</p>
<em>70</em>
<span>枚</span>
</a>
</li>
<li class="muji">
<a href="javascript:;">
<p>我的鸡笼<br>电子优惠券</p>
<p><strong>母鸡一只优惠券</strong><br>有效期：2018年10月</p>
<em>3</em>
<span>只</span>
</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="javascript:;">
<p>我的鸡笼<br>电子优惠券</p>
<p><strong>30枚蛋优惠券</strong><br>有效期：2018年10月</p>
<em>80</em>
<span>枚</span>
</a>
</li>
<li class="muji">
<a href="javascript:;">
<p>我的鸡笼<br>电子优惠券</p>
<p><strong>母鸡一只优惠券</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标签的内容。有兴趣研究的同学，一定看出来了，我这个优惠券都是用的绝对定位布局。
CSS 结构
* {
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 结构
// 获取三个a标签，和三个标签对应的内容
var navs = document.getElementById('divHeds').getElementsByTagName('a');
var conts = document.getElementById('divConts').getElementsByTagName('div');
var prevousOne = 0;// 上一个点击的标签，默认为第一个。
// 三个标签添加点击事件
for (var i = 0; i < 3; i++) {
// 立即执行函数，这样就可以把运行中的i，以闭包形式存下来
! function(i) {
// 每个标签点击时，隐藏上一个标签内容，除去上一个标签的on，给当前的标签加on，给当前对应标签内容显示出来
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来确认顺序。这里直接用闭包实现了indx顺序的功能。
- 相比每次写个循环来清除全部元素的class on，这次直接用清除上一个元素的思路，来有针对性的清掉class on
好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！
