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

本文实例讲述了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程序设计有所帮助。