javascript通用スライドドアtab類

スライドドアは汎用JS<!--body｛markgin:0 px;padding:0 px;font-size:12 px;background:咻咻咻咻咻咻ht:20 px;maffgin:20 px aut aut;border:1 px dotted.td.tbackc.h1,h 2,h 3,h 4,h 5,h 6{font-weight:bold;magin:0 px;padding:0 px;font-size:12 px;ul、li{magin:0 px;padding:0 px;padding:0 px;listliststininininggggggggx;1:0 px:10 px:0 ppx:0 pxxxtttttttttttdedededededededededededex:10 px:0 px;liststststmant:10 px:0 px:0 pxxxxxxxxxxxxxxxxxxxx1 px dotted菗.preview｛margin:10 px;padding:10 px;overflow:hidden;background:攂ee;｝cont｛padding:10 px;｝.cls｛clear:both;｝hidden｛display:none;｝抪本本本本本本本sourse｛border:1 px dotted d\菼c;width:600 px;heighhhhhhhhhhhhhhh:0 pxatot;t.textDiv｛margigin:10 px 40 px 10 px 10 px 10 px;texxxxxxxxxxxxxxxpx 10 px 10 px 10 px 10 px;tet t t.exxxxxxxxxxxxxxxtrtrtrtrtrtrtrtrtrexxxxxxxxxxxxx; background:菗FFF;border:1 px dotted菗ccc;padding:10 px;.⇒.scrolldoorFrame｛width:400 px;margin:0 px aut;overflow:hidden;｝.scrollUloverflow:hidden;height:35 px;.scrollUl li｛float:left;｝.bor 03｛border:1 px sold;marcc;bord-topddc.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.cd.gin:5 px;padding:2 px;font-weight:bold;.sd 02｛cursor:pointer;border:0 px solid咻CCC;magin:5 px;padding:2 px;｝--gt;/*13妖qq:181907667 msn:[email protected]メールボックス:[email protected]*/function scrolldoor(){scrollool.prototype={sd:function(menus、divs、openClass、close Class){var this=this;if(menus.length!=divs.length){alert){メニュー層の数とコンテンツ層の数が同じではない!(var i=0;i<menus.length;i+)｛_this.$(menus[i]).value=i;_this.((menus[i]).onmouseover=function()｛for(var j=0;j<menuss.length;j.j j j.eedistth.{class.(((())))))).cccccccccccccddddddds..(((((((((((())))))))))))))))).ccccccccccccccccccn.「none」、「{this.value]」.classi Name=openClass;_this.$(divs[this.value]).style.display=「block」/}","","",","",""",""","""","""""""","""""""""""""""""""""",""""""""""""""""",""""""","""""",""""""""""",""""""""""""","""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""05」、「sd 01」、「sd 02」、SDmodel.sd(「mm 01」、「mm 02」、「mm 03」、「mm 04」、「mm 05」、「cc 01」、「cc 02」、「cc 03」、「cc 04」、「cd 05」、「sd 01」「sd 02」)、SDmodel.sd(「mmm 01」、「mmm 02」、「mmm 03」、「mmm 04」、「mmm 05」、「ccc 01」、「ccc 02」、「cccc 03」、「ccc 04」、「ccc 05」、「sd 01」、「sd 02」;スライドドアパッケージ類効果プレビュースライドドアスライドドアスライドドアスライドドアスライドドアスライドドア第一層コンテンツ第二層コンテンツ第三層コンテンツ第四層コンテンツ第五層コンテンツスライドドアスライドドア2第1層コンテンツ第2層コンテンツ第3層コンテンツ第4層コンテンツ第5層コンテンツスライドドアスライドドアスライドドアスライドドアスライドドアスライドドア第1層コンテンツ第2層コンテンツ第3層コンテンツ第4層コンテンツ第5層コンテンツ
[Ctrl+A全選注:外部Jsを導入するにはリフレッシュが必要です.]
ソースコード:

 
  
 
  
function scrollDoor(){  
  
}  
  
scrollDoor.prototype = {  
  
sd : function(menus,divs,openClass,closeClass){  
  
 var _this = this;  
  
 if(menus.length != divs.length)  
  
 {  
  
  alert("              !");  
  
  return false;  
  
 }      
  
 for(var i = 0 ; i  {   
  
  _this.$(menus[i]).value = i;      
  
  _this.$(menus[i]).onmouseover = function(){  
  
 
  
   for(var j = 0 ; j    {        
  
    _this.$(menus[j]).className = closeClass;  
  
    _this.$(divs[j]).style.display = "none";  
  
   }  
  
   _this.$(menus[this.value]).className = openClass;   
  
   _this.$(divs[this.value]).style.display = "block";      
  
  }  
  
 }  
  
 },  
  
$ : function(oid){  
  
 if(typeof(oid) == "string")  
  
 return document.getElementById(oid);  
  
 return oid;  
  
}  
  
}  
  
 
 

使用方法:
1.上記のコードをあなたのページに導入します. 

2.ページの「」タブの に のコードを します.

 
  
  
  <br>var SDmodel = new scrollDoor();   
  <br>SDmodel.sd([  id  ],[   id  ],"     ","     ");  
  <br>SDmodel.sd([  id  2],[   id  2],"     ","     ");  
  <br>SDmodel.sd([  id  3],[   id  3],"     ","     ");  
  <br>   
  
 
 

ここでsdメソッドのパラメータは以下の通りです.
パラメータ1 [メニューid配列]:スライドドアメニューのid 
パラメータ2 [コンテンツID配列]:スライドコンテンツ層のidを表示、非表示にする 
パラメータ3 "メニュートリガークラス:マウスがスライドドアメニューを通過するクラス 
パラメータ4 「メニュークローズ」:スライドドアメニューの種類をマウスでスライドさせます.
3.ページにいくつかのスライドドアがあると、何回かのsd関数を呼び出します.sd呼び出しのパラメータを変更するだけで、上記のコードに示されているようになります.