举动与布局相疏散的选项卡，JS殊效代码

发布时间：2018-09-01 19:15:11 所属栏目：创业来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网