多标签页效果

前端入坑纪 40

其实，想写这个主题已经有很久了。只是碍于“难以描述”，而一直拖到现在。

今天看来，觉得也差不多是时候了！毕竟，之前很多代码确实写得有些繁琐。

所以，这次的主题更多是简化语法的层面出发，而不是特效的制作。

由于是实际项目的截图，所以比起我平时的素颜效果图，颜值上是有很大提升的。

那么，走着！

OK，first things first！项目链接

以后手机相关的页面，都会上传github github项目地址

真实项目截图

HTML 结构

    

        

            所有
            未完成
            已完成
        
        

            

                

                    

                        
                            
我的鸡笼
电子兑换券
                            
50枚蛋兑换券
有效期：2018年10月
                            50
                            枚
                        
                    
                    

                        
                            
我的鸡笼
电子兑换券
                            
母鸡一只兑换券
有效期：2018年10月
                            1
                            只
                        
                    
                
            
            

                


                    

                        
                            
我的鸡笼
电子优惠券
                            
50枚蛋优惠券
有效期：2018年10月
                            70
                            枚
                        
                    
                    

                        
                            
我的鸡笼
电子优惠券
                            
母鸡一只优惠券
有效期：2018年10月
                            3
                            只
                        
                    
                
            
            

                


                    

                        
                            
我的鸡笼
电子优惠券
                            
30枚蛋优惠券
有效期：2018年10月
                            80
                            枚
                        
                    
                    

                        
                            
我的鸡笼
电子优惠券
                            
母鸡一只优惠券
有效期：2018年10月
                            8
                            只
                        
                    
                
            
        
    

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)
        }

1. 相比以往给元素添加序号indx，再读取indx来确认顺序。这里直接用闭包实现了indx顺序的功能。
2. 相比每次写个循环来清除全部元素的class on，这次直接用清除上一个元素的思路，来有针对性的清掉class on

好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！