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

发布时间：2018-08-26 01:41:26 所属栏目：创业来源：站长网

导读：一个来自海外网站的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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如