案例二，点击隐藏，切换

一．点击按钮按钮左方内容隐藏，再点击出来

例：

    

    Document

 

     *{

         margin: 0;

         padding: 0;

         list-style: none;

     }

     p{float: left;

       width: 50px;

         height: 30px;

         background: cyan;

     }

     button{

         float: left;

     }

    

凭感觉

        <

哦噶

    

方法一：

     var p=document.querySelectorAll('div>p')[0];

    var button=document.querySelectorAll('div>button')[0];

        console.log(p);

        console.log(button);

//        var o=true;

//       

//        button.onclick=function(){

//             if(o){

//            o=false;

//            p.style.display='none';

//            button.innerHTML='>';

//        }else{

//            o=true;

//             p.style.display='block';

//            button.innerHTML='<';

//        }

//        }

//        

//       方法二： 2.

        button.onclick=function(){

            if(button.innerHTML=='<'){

                 p.style.display='none';

            button.innerHTML='>';

            }else{

                 p.style.display='block';

            button.innerHTML='<';

            }

        }

[if !supportLists]二． [endif]点击切换图片

例：

    

    Document

 

       *{

      margin= 0;

           padding: 0;

           list-style: none;

    }

     ul{

         width: 500px;

         height: 100px;

     }

     li{

         width: 100px;

         float: left;

         margin-left: 10px;

     }

     li img{

         width: 100px;

         height: 80px;

         float: left;

     }

     .tu>div{

         width: 500px;

         height: 500px;

         border: 1px solid cyan;

     }

     .tu>div>img{

         width:500px;

         height: 500px;

     }

 

     

         

         

         

         

     

 

     var tu=document.querySelectorAll('.tu>ul>li>img');

     var tu2=document.querySelector('.tu>div>img');

    console.log(tu2);

     for(var i=0;i

         tu[i].onclick=function(){

            tu2.src=this.src;

         }

     }