个人信息卡片列表样式切换页面详解
#先随便说说 先来看看长什么样子(动态图可能加载会慢一点): 先看怎么写,源码放在了github上本文最后会有链接可以做个参考。 #HTML结构 还是简单的HTML结构(我写的HTML结构都很简单哈哈) //注意看图片中的文字。具体的样式自己随意发挥就好。 这里有一个CSS的知识,就是background添加图片并且可以设置坐标,具体可以看看这篇文章 CSS中背景图片定位方法 ,这个页面的右上角两个按钮就是用这个方法在一张图片上提取出来的。 #简单的思路 其实JavaScript的思路很简单,就是获取右上角的两个按钮,然后给按钮添加点击事件,当按钮点击后根据不同的按钮再结合当前信息展示形式的判断,对方框里的所有li重新定义一个样式就好辣~四不四很简单哈哈 OK 获取这两个按钮: 编写了一个getByClassName的一个函数可以用通过类名来获取元素,这个函数的编写可以参考前一篇文章 《用原生JS写getByClassName方法》 遵循一个原则最好不用id所以我没有用id去定义这两个按钮,这个建议也给所有共同学习前端的同学。PS:但是我在判断当前的时候用了id所以别喷我哈哈所以我还是渣渣 ** 题外话,步入正题。** #正题-获取元素绑定事件 var switchBar=document.getElementById('switch');//获取父元素 var list