行为与结构相分离的选项卡，JS特效代码

发布时间：2018-08-28 16:28:17 所属栏目：创业来源：站长网

导读：JS行为与结构相分离的选项卡代码，来自经典论坛，包括注释，很不错的网页特效参考实例。有的同学不明白标题中的行为与结构分离是什么意思，小编的理解是：大概就是说事件函数不要写在HTML元素上。这个裸奔后显示不出内容层来了。裸奔后应该显示的是标题内

　　JS行为与结构相分离的选项卡代码，来自经典论坛，包括注释，很不错的网页特效参考实例。有的同学不明白标题中的“行为与结构分离”是什么意思，小编的理解是：大概就是说事件函数不要写在HTML元素上。

　　这个“裸奔”后显示不出内容层来了。“裸奔”后应该显示的是标题内容。

　　示例：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>行为与结构相分离的JS选项卡_烈火特效代码_liehuo.net</title> <style> *{ margin:0; padding:0; } body{ font-size:12px; } .selected{ background:#ff6600 no-repeat; color:#fff } ul{ height:23px; line-height:23px; list-style:none; } li{ float:left; width:69px; height:23px; text-align:center; cursor:pointer; } #nav_content{ margin:0px; padding:10px; width:600px; height:140px; border:1px solid #ff6600; } </style> <script> var net={}; net.tab={}; if (typeof($) == 'undefined') { $ = function(elem) { if (arguments.length > 1) { for (var i = 0, elems = [], length = arguments.length; i < length; i++) elems.push($(arguments[i])); return elems; } if (typeof elem == 'string') { return document.getElementById(elem); } else { return elem; } }; } //按钮点击时事件 net.tab.objSelect=function(clickobj,obj,elems){ for(var i=0;i<obj.length;i++) { obj[i].className=""; elems[i].style.display="none"; } clickobj.className="selected"; elems[clickobj.getAttribute("name")].style.display=""; } //初始话按钮状态 //参数elem:按钮标签id //参数num:初始时选中标签 net.tab.menuEvent=function(elem,num){ var objs=$(elem).getElementsByTagName("li"); var conobjs=$(elem+"_content").getElementsByTagName("div"); objs[num].className="selected"; conobjs[num].style.display=""; net.tab.addEvent(objs,function (){ net.tab.objSelect(this,objs,conobjs); }); } //添加按钮事件 net.tab.addEvent=function(elems,fun){ for (var i=0;i<elems.length;i++) { elems[i].setAttribute("name",i); elems[i].onclick=fun; } } window.onload=function(){ net.tab.menuEvent("nav",0) } </script> </head> <body> <div id="nav"> <ul> <li>按钮1</li> <li>按钮2</li> <li>按钮3</li> <li>按钮4</li> <li>按钮5</li> <li>按钮6</li> </ul> </div> <div id="nav_content"> <div style="display:none">内容1</div> <div style="display:none">内容2</div> <div style="display:none">内容3</div> <div style="display:none">内容4</div> <div style="display:none">内容5</div> <div style="display:none">内容6</div> </div> <div> 代码如下 var net={}; net.tab={}; if (typeof($) == 'undefined') { $ = function(elem) { if (arguments.length > 1) { for (var i = 0, elems = [], length = arguments.length; i < length; i++) elems.push($(arguments[i])); return elems; } if (typeof elem == 'string') { return document.getElementById(elem); } else { return elem; } }; } //按钮点击时事件 net.tab.objSelect=function(clickobj,obj,elems){ for(var i=0;i<obj.length;i++) { obj[i].className=""; elems[i].style.display="none"; } clickobj.className="selected"; elems[clickobj.getAttribute("name")].style.display=""; } //初始话按钮状态 //参数elem:按钮标签id //参数num:初始时选中标签 net.tab.menuEvent=function(elem,num){ var objs=$(elem).getElementsByTagName("li"); var conobjs=$(elem+"_content").getElementsByTagName("div"); objs[num].className="selected"; conobjs[num].style.display=""; net.tab.addEvent(objs,function (){ net.tab.objSelect(this,objs,conobjs); }); } //添加按钮事件 net.tab.addEvent=function(elems,fun){ for (var i=0;i<elems.length;i++) { elems[i].setAttribute("name",i); elems[i].onclick=fun; } } window.onload=function(){ net.tab.menuEvent("nav",0) } </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

穗港科研团队首建真正	邓丽君引爆虚拟人板块
比亚迪成立电池公司，	自称新势力2.0，电动屋