收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 500px;
height: 700px;
background-color: #D3D3D3;
margin: 0px auto;
text-align: center;
color: #636363;
box-shadow: 2px 2px 10px #999999;
}
.box ul{
padding:0;
margin: 0;
overflow: hidden;
}
.box ul li{
list-style: none;
float: left;
background-color:#87CEEB;
margin-left: 20px;
}
.box ul li a{
text-decoration: none;
font-size: 1.5em;
color: #EFEFEF;
display: block;
width: 100px;
height: 40px;
line-height: 40px;
}
.box ul li:hover {
font-size:0.8em;
background-color: #008000;
}
.box .pic{
width: 450px;
height: 450px;
border: 1px #FF7F50;
margin:60px auto 0;
}
.box .pic img {
width: 100%;
height: 100%;
}
.active {
font-size:1.2em;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<h2>家乡风景</h2>
<ul>
<li>
<a href="images/tongguan.png" title="山青">铜官山区</a>
</li>
<li>
<a href="images/jiaoqu.jpg" title="水秀">郊区</a>
</li>
<li>
<a href="images/yian.jpg" title="人杰">义安区</a>
</li>
<li>
<a href="images/zongyang.jpg" title="地灵">枞阳区</a>
</li>
</ul>
<div class="pic">
<img src="images/def.jpg"id="img" />
</div>
<p id="info"></p>
</div>
<!-- 以下是JS代码 -->
<script>
//获取所有得aTAG;
var pic = document.getElementsByTagName('a');
//获取页面中默认图片被替换掉的元素
var img = document.getElementById('img');
var p = document.getElementById('info');
//给所有的a标签一个点击事件
for(var i=0;i<pic.length;i++){
pic[i].onclick = function(){
//鼠标点击a标签后样式停留
for(var i= 0; i<pic.length;i++){
pic[i].classList.remove('active');
}
this.classList.add('active');
//获取到风景图片替换的信息与文字说明
var picUrl = this.href;
var picName=this.innerHTML;
var picInfo = this.title;
//将图像信息进行对换
img.src = picUrl;
p.innerHTML = '<span style="color:coral">'+picName+':'+picInfo+'</span>';
return false;
};
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
