利用CSS的类名切换,进行DIV的显示隐藏,简化JS
2015-07-23 10:47
766 查看
利用CSS的类名切换,进行DIV的显示隐藏,简化JS。
文章转载自http://www.yixieshi.com/ucd/12032.html
微博首页右侧要添加一个奥运金牌榜的模块,要求有收起和展开的按钮,用来显示不同的内容。
对网站来说这是很稀松平常的交互效果。具体html实现可能有同学会想到,做两个div,各自包含展开的内容和收起的内容。在点击展开按钮时出现一
个,另一个隐藏;而在点击收起的时候做相反的处理。这种事本身也没有对与错,能实现效果就好。但作为出现在微博首页的模块,并且出现在第一屏的位置,对性
能的优化肯定是要做足的。能尽量在我们css这一层做的,决不放到js那边去做。我的处理方式是把收起展开的样式都写好,放在一起,让js在默认展开或点
击展开的时候显示turn_olym_on,在点击收起的时候更换为turn_olym_off,这样js就只是更换一个class名的代码量,而对于展
开收起的两个按钮,我也通过更换的class名来显示和隐藏。
具体html代码:
在这里把所有用到的代码全部放在一起,把某种状态时不用显示的隐藏掉,比如展开状态时,class=”show_less W_linecolor”的div和展开的按钮class=”W_moredown”不用显示,就可以在最外层的div上写:
css暂时隐藏掉这两元素:
而当收起的时候,最外层的div就变成:
css则把之前隐藏的两个元素显示出来,并把需要隐藏的排行榜四五名class=”no_45″的tr标签、赛事重点的class=”show_more”及收起的按钮class=”W_moreup”隐藏:
这样,就只需要js在点击收起的时候把turn_olym_on换成turn_olym_off,而点击展开的时候把turn_olym_off换成turn_olym_on就可以了,其余的隐藏展示全部有css来搞定。
文章转载自http://www.yixieshi.com/ucd/12032.html
微博首页右侧要添加一个奥运金牌榜的模块,要求有收起和展开的按钮,用来显示不同的内容。
对网站来说这是很稀松平常的交互效果。具体html实现可能有同学会想到,做两个div,各自包含展开的内容和收起的内容。在点击展开按钮时出现一
个,另一个隐藏;而在点击收起的时候做相反的处理。这种事本身也没有对与错,能实现效果就好。但作为出现在微博首页的模块,并且出现在第一屏的位置,对性
能的优化肯定是要做足的。能尽量在我们css这一层做的,决不放到js那边去做。我的处理方式是把收起展开的样式都写好,放在一起,让js在默认展开或点
击展开的时候显示turn_olym_on,在点击收起的时候更换为turn_olym_off,这样js就只是更换一个class名的代码量,而对于展
开收起的两个按钮,我也通过更换的class名来显示和隐藏。
具体html代码:
在这里把所有用到的代码全部放在一起,把某种状态时不用显示的隐藏掉,比如展开状态时,class=”show_less W_linecolor”的div和展开的按钮class=”W_moredown”不用显示,就可以在最外层的div上写:
css暂时隐藏掉这两元素:
而当收起的时候,最外层的div就变成:
css则把之前隐藏的两个元素显示出来,并把需要隐藏的排行榜四五名class=”no_45″的tr标签、赛事重点的class=”show_more”及收起的按钮class=”W_moreup”隐藏:
这样,就只需要js在点击收起的时候把turn_olym_on换成turn_olym_off,而点击展开的时候把turn_olym_off换成turn_olym_on就可以了,其余的隐藏展示全部有css来搞定。
相关文章推荐
- CSS布局:三列布局自适应问题
- 学习CSS(6)
- CSS 多浏览器兼容性问题及解决方案
- CSS+DIV简单布局
- css position
- 2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)
- 使用CSS样式表格式化XML文档
- CSS清除浮动大全共8种方法
- 来问项目-less文件的组织
- css3中变形与动画(一)
- 使用css实现圆角图形绘制
- CSS相对定位、绝对定位之我见
- CSS:选择器
- css3 transition 实现图片放大缩小
- css关系选择符
- 30个值得收藏的CSS代码片段
- 纯css切换左侧菜单
- 如何处理CSS3属性前缀
- 个人学习css的真实经验
- CSS中背景图片定位