一个JS原生Tab网页选项卡代码

发布时间：2018-08-26 04:51:19 所属栏目：政策来源：站长网

导读：一个来自国外网站的JS原生Tab网页选项卡代码，由于时间关系只是把代码整理出来了，一没有美化，二没有汉化，其实也不用汉化的，如果你打算用这个代码的话，只要把其中的菜单选项改为自己想要的汉字就可以了。示例： !DOCTYPE HTML PUBLIC -//W3C//DTD HTM

　　一个来自国外网站的JS原生Tab网页选项卡代码，由于时间关系只是把代码整理出来了，一没有美化，二没有汉化，其实也不用汉化的，如果你打算用这个代码的话，只要把其中的菜单选项改为自己想要的汉字就可以了。

　　示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Tabs example</title> <script type="text/javascript"> var veryhuo = { hasClass: function(el,c) { return el.className.match(new RegExp('(s|^)'+c+'(s|$)')); }, addClass: function(el,c) { if (!veryhuo.hasClass(el,c)) el.className += " " + c; }, removeClass: function(el,c) { if (veryhuo.hasClass(el,c)) { el.className=el.className.replace(new RegExp('(s|^)'+c+'(s|$)'),' '); } }, hideAllTabs: function(ol) { var links = ol.getElementsByTagName("a"); for (var i=0; i<links.length; i++) { veryhuo.setTabFromLink(links[i], "none"); } }, setTabFromLink: function(link, style) { var dest = link.href.match(/#(.*)$/)[1]; document.getElementById(dest).style.display = style; if (style == "none") { veryhuo.removeClass(link, "active"); } else { veryhuo.addClass(link, "active"); } }, addEvent: function(obj, type, fn) { if ( obj.attachEvent ) { obj['e'+type+fn] = fn; obj[type+fn] = function(){obj['e'+type+fn]( window.event );}; obj.attachEvent('on'+type, obj[type+fn] ); } else { obj.addEventListener( type, fn, false ); } }, init: function() { var ols = document.getElementsByTagName("ol"); for (var i=0; i<ols.length; i++) { var ol = ols[i]; if (!/(^|s)tablinks(s|$)/.test(ol.className)) { continue; } veryhuo.addEvent(ol, "click", function(e) { var target = window.event ? window.event.srcElement : e.target; if (target.nodeName.toLowerCase() === "a") { //alert(target.parentNode.parentNode.tagName); //alert(e.target); veryhuo.hideAllTabs(target.parentNode.parentNode); veryhuo.setTabFromLink(target, "block"); if (e){ e.preventDefault(); } if (window.event) { window.event.returnValue = false; } return false; } }, true); veryhuo.hideAllTabs(ol); veryhuo.setTabFromLink(ol.getElementsByTagName("a")[0], "block"); } } }; veryhuo.addEvent(window, "load", veryhuo.init); </script> <style type="text/css"> body { font-family: arial, verdana, sans-serif; background-color: black; } ol.tablinks { margin: 0; padding: 0; } ol.tablinks li { display:inline; list-style: none; } ol.tablinks li a { text-decoration: none; color: black; background-color: red; padding: 6px 6px 0px 6px; } ol.tablinks li a:hover { background-color: white; } ol.tablinks li a:active { font-weight:bold; } ol.tablinks li a.active { background-color: white; } div.tab { width: 500px; background-color: white; padding: 6px; } </style> </head> <body> <ol class="tablinks"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ol> <div class="tab" id="tab1">This is tab 1. This is tab 1. This is tab 1. This is tab 1. This is tab 1. This is tab 1. This is tab 1. This is tab 1. This is tab 1. This is tab 1. This is tab 1. This is tab 1. </div> <div class="tab" id="tab2">This is tab 2. This is tab 2. This is tab 2. This is tab 2. This is tab 2. This is tab 2. This is tab 2. This is tab 2. This is tab 2. This is tab 2. This is tab 2. This is tab 2. </div> <div class="tab" id="tab3">This is tab 3. This is tab 3. This is tab 3. This is tab 3. This is tab 3. This is tab 3. This is tab 3. This is tab 3. This is tab 3. This is tab 3. This is tab 3. This is tab 3. </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>
提示：可修改后代码再运行!

（编辑：阜新站长网）

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