我想说的
我比较菜(小声bb)
实现
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
<script type="text/javascript" src="tupianku.js"></script>
</head>
<body>
<h1>Test</h1>
<ul>
<li >
<a href="1.jpg" onclick="showpic(this);
return false">image1</a>
</li>
<li>
<a href="2.jpg" onclick="showpic(this);
return false">image2</a>
</li>
<li>
<a href="3.jpg" onclick="showpic(this);
return false">image3</a>
</li>
</ul>
<img id="img123" src="https://cdn.elstec.cn/14/5.jpg">
</body>
</html>
JS部分
function showpic(whitchpic) {
var bianliang = whitchpic.getAttribute("href");
var place = document.getElementById("img123");
place.setAttribute("src",bianliang);
}
原理
创建一个函数名为 showpic
, whitchpic
为参数。whitchpic
通过调用 getAttribute
,把 "href"
作为参数传递给 getAttribute
,声明一个变量并把语句赋给它。
接下来获取占位图,需要在 html
部分进行修改。 <img>
元素添加 id
,调用 document.getElementById
,再次声明一个变量并把语句赋给它。最后通过 setAttribute
进行实现。
变量2.setAttribute("src",变量1);
html部分中,都是采用 <a>
元素,添加处理函数 showpic(this); return false
,防止被带到新窗口。