JavaScript list Toggle "Implement code" _javascript tips

IE compatibility is not handled, exactly say not very will, also hope pointing twos

Ideas:

1. JS Gets the button group object to give the fixed-point hit event, such as Btns=document.xxx (), to get the subscript eg:btns[i].index=i of the current object before traversing the process binding event;

2. Match index to the DOM object that will be displayed

3, click the process to switch class, first to determine whether there is a specified class, there is deleted, did not add the specified class. Note: if (!null) is true.

4, onmouseover Empathy

Html

<! DOCTYPE html>  

CSS

*{List-style:none;
  Border:none;
  Text-decoration:none;
  margin:0;
  padding:0;
Box-sizing:border-box;
  } h3{Text-align:center;
Color:dimgrey;
  }. baner_parent{width:1000px;
margin:0 Auto;
  }. will_left{float:left; will_right{float:right; Btn_left ul li{Text-align:center;
  width:160px;
  height:98px;
  Background-color:darkgrey;
  PADDING:13PX 0;
  Cursor:pointer;
  -webkit-transition:all 5s Ease-out;
  -moz-transition:all 5s Ease-out;
  -o-transition:all 5s Ease-out;
  -ms-transition:all 5s Ease-out;
Transition:all 5s Ease-out;  }. btn_left ul li.selected{Background-color:cornflowerblue; Btn_left ul Li:not (: Nth-child (4)) {border-bottom:1px
Solid Dimgrey;
  }. Btn_left ul li img{width:50px;
height:50px;
  }. Btn_left ul li span{display:block; banner_right,.banner_lists img{width:800px;
  height:391px;
position:relative;
  }. banner_lists{Position:absolute;
height:391px; }. Banner_lists:not (: Nth-child (1)){Display:none;}
  . banner_lists ul{Overflow:hidden;
  Position:absolute;
  bottom:0;
left:0;
  }. btn{height:33px;
  width:200px;
  border-right:1px solid #000;
  Margin-top: -3px;
  Text-align:center;
  line-height:33px;
  Background-color:darkgrey;
  Opacity:. 8;
  Cursor:pointer;
  -webkit-transition:all 5s Ease-out;
  -moz-transition:all 5s Ease-out;
  -o-transition:all 5s Ease-out;
  -ms-transition:all 5s Ease-out;
Transition:all 5s Ease-out; }. btn:hover,.btn.selected{Background-color:cornflowerblue;}

JS

/** * Created by the Administrator on 2016/4/30 0030. * Blog:wjf444128852.github.io * does not support IE */window.onload=function () {var arrfr = [' img/ferrari01.jpg ', ' img/ferrari02.jp
  G ', ' img/ferrari03.jpg ', ' img/ferrari04.jpg '];
  var ARRBC = [' img/benchi01.jpg ', ' img/benchi02.jpg ', ' img/benchi03.jpg ', ' img/benchi04.jpg '];
  var ARRBM = [' img/baoma01.jpg ', ' img/baoma02.jpg ', ' img/baoma03.jpg ', ' img/baoma04.jpg '];
  var ArrAD = [' img/aodi01.jpg ', ' img/aodi02.jpg ', ' img/aodi03.jpg ', ' img/aodi04.jpg '];
  var array = [Arrfr,arrbc,arrbm,arrad];
  var btns=document.getelementsbyclassname (' js_btn ');
  var divlist=document.getelementsbyclassname (' banner_lists ');
    Brand switching for (Var i=0;i<btns.length;i++) {btns[i].index=i;
  Btns[i].onclick=showitems; //classname Toggle, does it contain the specified class function hasclass (ELEM,CLS) {return Elem.className.match (new RegExp (' (\\s|^) ' +cls+ ') (\
  s|$));
    ///No Append specified class function addclass (ELEM,CLS) {if (!hasclass (elem,cls)) {elem.classname+= "" +CLS;
}
  }  You have to remove the specified class function removeclass (ELEM,CLS) {if (Hasclass (elem,cls)) {var reg=new RegExp (' (\\s|^) ' +cls+ ') (\
      s|$) ');
    Elem.classname=elem.classname.replace (Reg, ""); }//classname switch to remove all function RemoveAll (obj) {for (var i = 0; i < obj.length; i++) {Removeclass
    I], "selected");
     }//div display toggle Function showitems () {RemoveAll (btns);
     AddClass (This, "selected");
      for (var s = 0; s< divlist.length; s++) {divlist[s].style.display= "none";    
    divlist[this.index].style.display= "Block";
  } willhover (This.index);
    //Right toggle button effect function willhover (sum) {var hoverbtns=divlist[sum].getelementsbyclassname (' btn ');
    var img=divlist[sum].getelementsbytagname (' img ') [0];
      for (var i = 0; i < hoverbtns.length; i++) {hoverbtns[i].index=i;
         Hoverbtns[i].onmouseover=function () {RemoveAll (hoverbtns);
        AddClass (This, "selected");
  var imgsrc=array[sum][this.index];      Img.src=array[sum][this.index];
}}///default Willhover (0) can be switched for the first time; };

Above this JavaScript list to switch "Implementation Code" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.