结构/表现/行为完全分离的选项卡(jquery版和原生JS版)

关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释.
另有几点说明:
1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){…}与jQuery的$(document).ready(function(){…});的区别,这也是我为什么不用样式定义初始状态下隐藏第二三个显示区的原因;
2. 本文只是选项卡一个原型实现,若要用于同一页面多个选项卡,变量已集中到函数头部,可自行封装成函数;
3. 请不要问如何实现更酷很炫的效果,请自已思考添加效果;
4. 不希望大家用这个效果时只是机械的复制粘贴,思考加实践,然后消化成自己的.
查看演示:
结构/表现/行为完全分离的选项卡(jQ版和原生JS版)@Mr.Think body{font-size:0.8em;letter-spacing:1px;font-family:"Microsoft YaHei"; line-height:1.8em} div,h2,p,ul,li{margin:0;padding:0} h1{font-size:1em; font-weight:normal;} h1 a{background:#047; padding:2px 3px; color:#fff; text-decoration:none;} h1 a:hover{background:#a40000; color:#fff; text-decoration:underline} h3{color:#888; font-weight:bold;font-size:1em; margin:1em auto; position:relative} h2{width:120px; height:25px;background:#a40000;font-size:12px; color:#fff;text-align:center; ;line-height:25px;margin:30px 0 10px} ul.tabnav{width:500px;height:25px;margin-left:100px} ul.tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} ul.tabnav li.hover{background:#047} .tabbox{width:500px;height:100%;border:2px solid #047} .tabbox div{margin:10px;line-height:20px} ul#tabnav{width:500px;height:25px;margin-left:100px} ul#tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} ul#tabnav li.hover{background:#047} #tabbox{width:500px;height:100%;border:2px solid #047} #tabbox div{margin:10px;line-height:20px}

立即联系我

立即提交