javascript通過獲取html標簽屬性class實現(xiàn)多選項卡的方法

2020-03-24 16:01:12

字體：大中小

來源：轉載

供稿：網(wǎng)友

本文實例講述了javascript通過獲取html標簽屬性class實現(xiàn)多選項卡的方法。分享給大家供大家參考。具體實現(xiàn)方法如下： !DOCTYPE html html head meta charset="utf-8" / title 原生javascript通過獲取html標簽屬性class實現(xiàn)多選項卡 /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程序設計有所幫助。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：javascript html5搖一搖功能的實現(xiàn)

下一篇：JS HTML5實現(xiàn)拖拽移動列表效果