JS implementation of multiple sliding doors on the same page display effect

Multiple sliding doors on the same page, in the Working Group, has been a very tangled problem ~ Learning Library There is a technical colleague 5 years ago to the package of control, we have been using the reuse that.

Recent projects in the use of this effect is very much, every time to call that JS control, but also to match the corresponding ID according to the rules, really feel trouble, just think, for why do not write a can be universal ~

So, here's the script effect:

Js:

<script type= "Text/javascript" >  var arrayobj = [' ', ' ', ' ', ' ', ', ', '];  function Slide (index,id) {    var newsobj = document.getElementById (' A ' +index+arrayobj[index]); var newsObj01 = document.getElementById (' B ' +index +arrayobj[index]); var obj = document.getElementById (' A ' +index+ id); var obj01 = document.getElementById (' B ' +index+ ID); if (newsobj) {newsObj.style.display = ' none '; newsobj01.classname = ' option2 ';} Obj01.classname = ' option1 '; obj.style.display = ';                arrayobj[index]= ID;} </script>

HTML code (three sliding doors as an example)

<div class= "Indexnews" > <div class= "Top" > <div class= "option2" id= "B11" onmouseover= "slide" > Sports News </div> <div class= "Option2" id= "B12" onmouseover= "slide" ><a href= "#" > Entertainment news </a></ div> <div class= "Option2" id= "B13" onmouseover= "Slide (1,3)" ><a href= "#" > Featured News </a></div> &L T;div class= "Option2" id= "B14" onmouseover= "Slide (1,4)" ><a href= "#" > Recommended news </a></div> </div > <div class= "Newsborder" > <div id= "A11" style= "Display:none;" ><div class=articlelist> <ul> <li> text content </li> </ul> &lt ;/div> </div> <div id= "A12" style= "Display:none;" ><div class=articlelist> <ul> <!--Entertainment News--<li><a href= "#" &G t; text content text content </a></li> </ul> </div> </div> <div id= "A13" style= "Displa Y:none; " ><dIV class=articlelist> <ul> <!--News-<li><a href= "#" > Text content in text Text content </a></li> </ul> </div> </div> <div id= "A14" style= "Display:non e; " ><div class=articlelist> <ul> <!--featured News-<li><a href= "#" &G t; text content text content text content text content </a></li> </ul> </div> </div> </div></div> <div class= "Indexnews" > <div class= "Top" > <div class= "option2" id= "B21" onmouseover= "Slide (2,1)" > Sports News </div> <div class= "Option2" id= "B22" onmouseover= "Slide (2,2)" ><a href= "#" > Entertainment news </a></ div> <div class= "Option2" id= "B23" onmouseover= "Slide (2,3)" ><a href= "#" > Recommended news </a></div> & lt;/div> <div class= "Newsborder" > <div id= "A21" style= "Display:none;" ><div class=articlelist> <ul> < Li><a href= "#" > "Text content text content text content text contents </a></li> <li><a href=" # "> Text content text content text content text content inside Allow text content text content </a></li> </ul> </div> </div> <div id= "A22" style= "display : none; " ><div class=articlelist> <ul> <li><a href= "#" > Text content text content </a></li > </ul> </div> </div> <div id= "A23" style= "Display:none;"          ><div class=articlelist> <ul> <li><a href= "#" > Text content </a></li> </ul> </div> </div> </div></div><div class= "Indexnews" > <div class= "Top" > <div class= "option2" id= "B31" onmouseover= "Slide (3,1)" > Sports News </div> <div class= "Option2 "Id=" B32 "onmouseover=" Slide (3,2) "><a> Entertainment news </a></div> </div> <div class=" Newsborder " > <div id= "A31" style= "Display:noNE; "           ><div class=articlelist> <ul> <li><a href= "#" > Text content </a></li> </ul> </div> </div> <div id= "A32" style= "Display:none;" ><div class=articlelist> <ul> <li><a href= "#" > Text content text content text content text content text content </ a></li> </ul> </div> </div> </div></div>

Last Call JS

<script>slide (1,1); Slide (2,1); Slide (3,1); </ Script>

A little progress every day, fun unlimited ~