javascript通过获取html标签属性class实现多选项卡的方法

时间：2021-05-26

本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>原生javascript通过获取html标签属性class实现多选项卡</title> <style type="text/css"> .tab { clear: both; margin: 20px auto; padding: 10px; width: 680px; overflow: hidden; } .tab .tab-menu { margin: 0; padding: 0; list-style: none; } .tab .tab-menu li { display: inline; margin: 0 2px 0 0; } .tab .tab-menu li a { padding: 0 1em; text-decoration: none; color: #a80; background: #fe5; } .tab .tab-menu li a:hover { background: #fc0; color: #540; } .tab .tab-menu .active { } .tab .tab-menu .active a { padding-bottom: 2px; font-weight: bold; color: black; background: #fc0; } .tab .tab-panel { padding: 1em; border: 2px solid #fc0; background: #fff; } .tab .tab-panel h2 { font-size: 1.5em; color: #fc0; } .tab .tab-none { display: none; } </style> <script type="text/javascript"> function Tab(style, scope){ this.oItem = this.getByClass(style, scope); this.init(); } Tab.prototype = { init: function(){ var that = this, menu, m; for(var i = 0, len = this.oItem.length; i < len; i++){ menu = this.oItem[i].getElementsByTagName('li'); for(var j = 0, mLen = menu.length; j < mLen; j++){ m = menu[j]; m.index = j; m.onmouseover = function(){that.focus(this);} } } }, focus: function(o){ var par = o.parentNode.parentNode, panel = par.getElementsByTagName('div'), btn = par.getElementsByTagName('li'), len = btn.length; for(var i = 0; i < len; i++){ btn[i].className = ''; panel[i].className = this.changeClass(panel[i].className, 'tab-none', true); } o.className = 'active'; panel[o.index].className = this.changeClass(panel[o.index].className, 'tab-none', false); }, changeClass: function(cl, cl2, add){ var flag; if(cl.match(cl2) != null) flag = true; if(add ^ flag) return flag ? cl.replace(cl2, '') : cl += ' ' + cl2; return cl; }, getByClass: function(cla, obj){ var obj = obj || document, arr = []; if(document.getElementsByClassName){ return document.getElementsByClassName(cla); } else { var all = obj.getElementsByTagName('*'); for(var i = 0, len = all.length; i < len; i++){ if(all[i].className.match(cla) != null) arr.push(all[i]); } return arr; } } } window.onload = function(){ new Tab('tab-menu', null); } </script> </head> <body> <div class="tab"> <ul class="tab-menu"> <li class="active"><a href="">111</a></li> <li><a href="">122</a></li> <li><a href="">133</a></li> </ul> <div class="tab-panel"> 111 </div> <div class="tab-panel tab-none"> 122 </div> <div class="tab-panel tab-none"> 133 </div> </div> <div class="tab"> <ul class="tab-menu"> <li class="active"><a href="">211</a></li> <li><a href="">222</a></li> <li><a href="">233</a></li> </ul> <div class="tab-panel"> 211 </div> <div class="tab-panel tab-none"> 222 </div> <div class="tab-panel tab-none"> 233 </div> </div> <div class="tab"> <ul class="tab-menu"> <li class="active"><a href="">311</a></li> <li><a href="">322</a></li> <li><a href="">333</a></li> </ul> <div class="tab-panel"> 311 </div> <div class="tab-panel tab-none"> 322 </div> <div class="tab-panel tab-none"> 333 </div> </div> </body></html>

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章