习题2：tab切换，原生

< html >

< head >

   < meta  charset= "UTF-8" >

   < title >标题 </ title >

   < style >

     * {

       margin:  0;

       padding:  0;

    }

     li {

       list-style:  none;

    }

     .box {

       width:  400px;

       height:  200px;

       position:  relative;

    }

     .box .add {

       position:  absolute;

       top:  0;

       left:  0;

       display:  none;

    }

     .box .ft {

       display:  block;

    }

     img {

       width:  100%;

       height:  100%;

    }

     .button .left {

       position:  absolute;

       top:  50%;

       left:  0;

       display:  inline-block;

       color:  red;

       width:  40px;

       height:  40px;

       line-height:  40px;

       background-color:  #ffffff;

       opacity:  0.4;

       z-index:  999;

       text-align:  center;

       margin-top:  -20px;

    }

     .button .right {

       position:  absolute;

       top:  50%;

       right:  0;

       display:  inline-block;

       color:  red;

       width:  40px;

       height:  40px;

       line-height:  40px;

       background-color:  #ffffff;

       opacity:  0.4;

       z-index:  999;

       text-align:  center;

       margin-top:  -20px;

    }

     .nabble {

       width:  100%;

       height:  auto;

    }

     .nabble .nav {

       width:  100%;

       display:  flex;

       justify-content:  space-around;

    }

     .nabble .nav .navb {

       text-align:  center;

       flex:  1;

       border:  1px  solid  red;

    }

     .nabble .tab {

       color:  red;

       display:  none;

    }

     .nabble .showw {

       display:  block;

    }

   </ style >

</ head >

< body >

   < div  class= "box" >

     < ul  class= "Img" >

       < li  class= "add ft" >

         < img  src= "./img/box1.jpg" >

       </ li >

       < li  class= "add" >

         < img  src= "./img/box2.jpg" >

       </ li >

       < li  class= "add" >

         < img  src= "./img/box3.jpg" >

       </ li >

     </ ul >

     < div  class= "button" >

       < div  class= "left"  onclick= "leftt()" >

        SD  </ div >

       < div  class= "right"  onclick= "rightt()" >

        FD

       </ div >

     </ div >

   </ div >

   < div  class= "nabble" >

     < div  class= "nav" >

       < div  class= "navb" >

        我是按钮1

       </ div >

       < div  class= "navb" >

        我是按钮2

       </ div >

       < div  class= "navb" >

        我是按钮3

       </ div >

     </ div >

     < div  class= "tab showw" >

      你好,我是tab1

     </ div >

     < div  class= "tab" >

      你好,我是tab2

     </ div >

     < div  class= "tab" >

      你好,我是tab3

     </ div >

   </ div >

   < script >

                                   var  arr =  document. getElementsByClassName( 'navb');

                                   var  Tab =  document. getElementsByClassName( 'tab');

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

                                     arr[ i]. active =  i;

                                     arr[ i]. onclick =  function () {

                                       var  ad =  this. active;

                                       console. log( ad);

                                       for ( var  k =  0;  k <  Tab. length;  k++) {

                                         Tab[ k]. className =  "tab";

                                      }

                                       Tab[ ad]. className =  "tab showw";

                                    }

                                  }

   </ script >

</ body >

</ html >

注意事项：把arr[i]是一个对象，然后向对象里赋值相应的索引