JS显示隐藏层类

    技术2022-05-13  5

     

    <!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>


    最新回复(0)