实例
html>
使用事件给a标签添加的单击事件(结合循环遍历给a标签添加事件，达到点击就切换的效果).05.08
.box{
width:500px;
height:700px;
background-color:#efefef;
border:1pxsolidlightgray;
margin:20pxauto;
text-align:center;
color:#636363;
box-shadow:2px2px2px#999;
}
.boxul{
margin:0;
padding:0;
/*将ul转为BFC独立块,使之不受内部浮动元素的影响*/
overflow:hidden;
}
.boxulli{
list-style-type:none;
float:left;
background-color:skyblue;
margin-left:20px;
}
.active{
font-size:1.2em;
background-color:coral;
}
.boxullia{
/*将a转为块元素,并设置为li的宽高,这样可以使整个li可以被点击*/
display:block;
width:100px;
height:40px;
line-height:40px;
color:white;
text-decoration:none;
}
.boxulli:hover{
font-size:1.2em;
background-color:coral;
}
.box.pic{
width:450px;
height:450px;
border:1pxsolidlightgray;
margin:50pxauto0;
}
.box.picimg{
width:100%;
height:100%;
}
明星相册
赵丽颖
高圆圆
孙俪
范冰冰
//1.获取页面元素
varpic=document.getElementsByTagName('a');
varimg=document.getElementById('img');
varp=document.getElementById('info');
//2.循环遍历a给每个a添加事件
for(vari=0;i
pic[i].onclick=function(){
//锁定选项卡效果
for(vari=0;i
pic[i].classList.remove('active');
}
this.classList.add('active');
//3.获取基本信息
varpicUrl=this.href;
varpicName=this.title;
varpicInfo=this.innerHTML;
img.src=picUrl;
p.innerHTML=''+picInfo+picName+'';
returnfalse;
};
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
