个人信息卡片列表样式切换页面详解

#先随便说说

先来看看长什么样子（动态图可能加载会慢一点）:

效果图

先看怎么写，源码放在了github上本文最后会有链接可以做个参考。

#HTML结构

还是简单的HTML结构（我写的HTML结构都很简单哈哈）

HTML结构

//注意看图片中的文字。具体的样式自己随意发挥就好。

这里有一个CSS的知识，就是background添加图片并且可以设置坐标，具体可以看看这篇文章CSS中背景图片定位方法，这个页面的右上角两个按钮就是用这个方法在一张图片上提取出来的。

#简单的思路

其实JavaScript的思路很简单，就是获取右上角的两个按钮，然后给按钮添加点击事件，当按钮点击后根据不同的按钮再结合当前信息展示形式的判断，对方框里的所有li重新定义一个样式就好辣~四不四很简单哈哈

OK 获取这两个按钮：

编写了一个getByClassName的一个函数可以用通过类名来获取元素，这个函数的编写可以参考前一篇文章《用原生JS写getByClassName方法》
遵循一个原则最好不用id所以我没有用id去定义这两个按钮，这个建议也给所有共同学习前端的同学。PS：但是我在判断当前的时候用了id所以别喷我哈哈所以我还是渣渣

** 题外话，步入正题。**

#正题-获取元素绑定事件

var switchBar=document.getElementById('switch');//获取父元素
var list=switchBar.getElementsByTagName('a')[0];//获取第一个a按钮-列表按钮
var car=switchBar.getElementsByTagName('a')[1];//获取第二个a按钮-卡片按钮

我们要编写个方法，然后点击这两个按钮的时候执行更换样式的方法。

list.onclick=changeSwitchClass;
car.onclick=changeSwitchClass;

#正题-更换样式的方法

好啦，我们现在只要写好这个方法就行了。
有按钮被点击了，我们首先要知道是哪个按钮被点击了通过判断this.id执行不同的操作。看代码和详细的不能再详细的注释。PS：写注释是一个好习惯。

//忘了说 con-big就是卡片样式 con-small是列表样式

function changeSwitchClass(e){
  if(this.id=="btn-car-off"){
    //现在被点击的是卡片按钮，说明原来是小的列表
    //所以我们获取所有class为con-small的元素并且更改元素
    var itmes = getByClassName(all,"con-small");

    this.id="btn-car-on";//小图标有不同的背景图 卡片按钮的图标变亮
    list.id="btn-list-off";//同上 也就是列表按钮的图标变灰

    //接下来就是循环给所有的li更换class
    for (var i = itmes.length - 1; i >= 0; i--) {
      itmes[i].className = "con-big";
    }
  }else if(this.id=="btn-list-off"){
    //参考上面
    var itmes = getByClassName(all,"con-big");
    this.id="btn-list-on";
    car.id="btn-car-off";
    for (var i = itmes.length - 1; i >= 0; i--) {
      itmes[i].className="con-small";
    }
  }
}

OK，结束了，引入JS就OK咯

#结束以及-Github链接

我叫掏粪--个人博客

这个小东西的源码在github的地址：卡片列表样式切换信息展示效果

如果你喜欢我就给我点个赞哟~

最后编辑于：2017.12.04 21:54:29