案例1.点击图片,页面背景改成当前图片
分析:①获取元素
②利用循环注册点击事件
③点击图片后,页面背景修改为当前图片
<html lang="en">
<head>
<style>
body{
background-image: url(img/timg.jpg) ;
background-size: cover;
background-repeat: no-repeat;
}
li{
list-style: none;
float: left;
width: 100px;
}
ul{
margin-top: 90px;
margin-left: 475px;
}
img{
width: 80px;
height: 55px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="img/timg.jpg" alt=""></li>
<li><img src="img/timg1.jpg" alt=""></li>
<li><img src="img/timg2.jpg" alt=""></li>
<li><img src="img/timg3.jpg" alt=""></li>
</ul>
<script>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
console.log(imgs);
for(var i = 0; i < imgs.length; i++){
imgs[i].onclick = function(){
document.body.style.backgroundImage = 'url('+this.src+')';
}
}
</script>
</body>
</html>
结果:
注:
querySelector():返回匹配指定选择器的第一个元素
querySelectorAll():返回所有的元素
2.tab切换
1.点击选项卡,选项卡背景颜色变成红色,可以通过排他思想修改类名的方式
2.面板栏要跟随上面选项卡的值进行变化
3.先把所有面板隐藏起来,点击选项卡,对应的面板栏再设置为显示
<script>
//获取元素
var tab_list = document.querySelector('.tab_list');//类名前一定要加.
var lis = document.querySelectorAll('li');
var items = document.querySelectorAll('.item');
//循环点击事件
for(var i = 0; i < lis.length; i++){
lis[i].setAttribute('index',i);
lis[i].onclick = function(){
for(var i = 0; i < lis.length; i++){
lis[i].className = '';
}
this.className = 'current';
//拿到这个属性值
var index = this.getAttribute('index');
console.log(index);
//显示点击这个div
for(var i = 0; i <items.length; i++){
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
结果: