通过本文主要向大家介绍了分离,选项卡等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释.
另有几点说明:
1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){…}与jQuery的$(document).ready(function(){…});的区别,这也是我为什么不用样式定义初始状态下隐藏第二三个显示区的原因;
2. 本文只是选项卡一个原型实现,若要用于同一页面多个选项卡,变量已集中到函数头部,可自行封装成函数;
3. 请不要问如何实现更酷很炫的效果,请自已思考添加效果;
4. 不希望大家用这个效果时只是机械的复制粘贴,思考加实践,然后消化成自己的.
查看演示:
结构/表现/行为完全分离的选项卡(jQ版和原生JS版)@Mr.Think
CSS技术在这里显示!@Mr.Think.
xhtml技术在这里显示!@Mr.Think.
CSS技术在这里显示!@Mr.Think.
xhtml技术在这里显示!@Mr.Think.
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
核心代码:
另有几点说明:
1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){…}与jQuery的$(document).ready(function(){…});的区别,这也是我为什么不用样式定义初始状态下隐藏第二三个显示区的原因;
2. 本文只是选项卡一个原型实现,若要用于同一页面多个选项卡,变量已集中到函数头部,可自行封装成函数;
3. 请不要问如何实现更酷很炫的效果,请自已思考添加效果;
4. 不希望大家用这个效果时只是机械的复制粘贴,思考加实践,然后消化成自己的.
查看演示:
Mr.Think的个人博客 @专注前端技术,热爱PHP,崇尚简单生活.
返回文章页:结构/表现/行为完全分离的选项卡(jQ版和原生JS版)@Mr.Think
基于jQ版本
- jQuery技术
- CSS技术
- xhtml技术
CSS技术在这里显示!@Mr.Think.
xhtml技术在这里显示!@Mr.Think.
原生JS版本
jQuery技术在这里显示!@Mr.Think.
CSS技术在这里显示!@Mr.Think.
xhtml技术在这里显示!@Mr.Think.
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
核心代码: