一．点击按钮按钮左方内容隐藏，再点击出来
例：
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;
}
}
