JS显示隐藏层类

最新推荐文章于 2024-05-14 11:30:35 发布

KarlLuo

最新推荐文章于 2024-05-14 11:30:35 发布

阅读量3.2k

点赞数

分类专栏： IT技术文章标签： function object xhtml div html

本文链接：https://blog.csdn.net/lk188/article/details/4572502

版权

IT技术专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS显示隐藏层类</title>

</head>

<body>

<div id="box">

<a href="#" id="a0">wewegwg</a> <a href="#" id="a1">weg</a> <a href="#" id="a2">wrgwe</a> <a href="#" id="a3">wegt</a> <a href="#">weg</a> <a href="#">we</a></div>

<div id="box2">

<div id="e0">

wgwegwegweg

rwegvwvwgv

</div>

<div id="e1">

ergwergergewrgerg

</div>

<div id="e2">

egergerwg

</div>

<div id="e3">

regrewgererherhe

</div>

</div>

<script language="javascript">

function $(id){return document.getElementById(id);}

function chlayer_display(layers){

this.ch = function(index){

for(var i=0;i<this.contents.length;i++){

this.contents[i].style.display = 'none';

}

this.contents[index].style.display = 'block';

}

this.init = function(){

for(var i=0;i<this.controls.length;i++){

this.controls[i].value = i;

var _this = this;

this.controls[i].onmousemove = function(){

_this.ch(this.value);

};

}

if(typeof this.checked != 'undefined'){

this.ch(this.checked);

} else {

this.ch(0);

}

}

if(typeof layers == 'object'){

this.controls = [];

this.contents = [];

for(var i=j=0;i<layers.length;i++){

if(typeof layers[i].control=='object'&&typeof layers[i].content=='object'){

this.controls[j] = layers[i].control;

this.contents[j] = layers[i].content;

if(layers[j].checked){this.checked = j};

j++;

} else {

continue;

}

}

if(this.controls.length > 0 && this.contents.length > 0){this.init()};

}

}

/*var aaa = new chlayer_display([

{

'control':$('a0'),

'content':$('e0'),

'checked':true

},

{

'control':$('a1'),

'content':$('e1')

},

{

'control':$('a2'),

'content':$('e2')

},

{

'control':$('a3'),

'content':$('e3')

}

]);*/

var aaa = new chlayer_display();

aaa.controls = $('box').getElementsByTagName('a');

aaa.contents = $('box2').getElementsByTagName('div');

aaa.init();

</script>

</body>

</html>