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

2020-03-24 16:01:12

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 li a href="" 111 /a /li li a href="" 122 /a /li li a href="" 133 /a /li /ul div /div div /div div /div /div div li a href="" 211 /a /li li a href="" 222 /a /li li a href="" 233 /a /li /ul div /div div /div div /div /div div li a href="" 311 /a /li li a href="" 322 /a /li li a href="" 333 /a /li /ul div /div div /div div /div /div /body /html 希望本文所述对大家的javascript程序设计有所帮助。更多编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：javascript html5摇一摇功能的实现

下一篇：JS HTML5实现拖拽移动列表效果