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

2024-05-06 16:23:48

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了javascript通过获取html标签属性class实现多选项卡的方法,涉及javascript针对页面元素属性与事件的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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>