实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="C:\phpStudy\PHPTutorial\WWW\W\0508\css.css">
<style>.claa{
width: 500px;
height: 700px;
background-color: antiquewhite;
margin: 30px 5px;
}
.w5 {
margin:0;
padding:0;
/*将ul转为BFC独立块,使之不受内部浮动元素的影响*/
overflow: hidden;
}
.w5 li{
list-style-type:none;
float:left;
margin: 10px 25px;
}
.w5 li:hover {
font-size:1.2em;
background-color: coral;
}
.w5 li a{
line-height:50px;
display: block;
text-decoration: none;
width: 100px;
height: 50px;
color: wheat;
background-color: aqua;
text-align: center;
}
.pic{
margin: 10px 50px;
width: 350px;
height: 450px;
border: 1px solid rgb(138, 107, 107);
}
.pic img{
width: 100%;
height: 100%;
}
#info{
text-align: center;
}
</style>
</head>
<body>
<div class="claa">
<ul class="w5">
<li><a title="茂名，又称“油城”，广东省地级市" href="C:\phpStudy\PHPTutorial\WWW\W\0508\images\gyy.jpg" onclick="pics(this);return false">茂名</a></li>
<li><a onclick="pics(this);return false" title="茂名位于广东省西部，东接阳江市，南邻南海，西连湛江市，北与广西省玉林市交界" href="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=d66315b91d178a82ca3c78a2c603737f/908fa0ec08fa513d72d283ab3e6d55fbb2fbd94f.jpg">茂名位置</a></li>
<li><a onclick="pics(this);return false" title="茂名市名起源于人名，由人名而至县名，由县名而至市名。茂名市南部临海" href="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=4673d1f91230e924cba49c317c096e66/f31fbe096b63f6242a1bf5f28a44ebf81b4ca3f9.jpg">茂名历史</a></li>
</ul>
<div class="pic">
<img src="C:\phpStudy\PHPTutorial\WWW\W\0508\images\zwt.png" alt="">
</div>
<p id='info'>51</p>
</div>
<script>
function pics(pic){
// 获取名字,图片,介绍
var picurl = this.href;
var picunfo = this.title;
var picnane = this.innerHTML;
// 获取到页面,替换原来的默认图片
var img =document.getElementById('img');
var p = document.getElementbyid('p');
img.src = picurl;
p.innerHTML = picnane + picunfo ;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
主要使用的js代码是
//替换 //返回指定 ID 的元素：
document.getElementById(ID元素)