一个简单的幻灯片放映:Web文档,它在页面的大约中央显示一个水果图像。在图像下方,放置三个标有水果名称的按钮元素。 (其中一个必须是您选择显示的水果的名称。)按下按钮应将显示的图像更改为按钮上指定的水果图像。
这是我到目前为止所得到的
<!DOCTYPE html >
<html>
<head>
<style>
img.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
#bananas {
display:none;
}
#apples {
display:none;
}
</style>
<script type="text/javascript">
function toggle_visibility(grapes) {
var e = document.getElementById(grapes);
if(e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
function toggle_visibility(bananas) {
var e = document.getElementById(bananas);
if(e.style.display == "block") e.style.display = 'none';
else e.style.display = 'block';
}
function toggle_visibility(apples) {
var e = document.getElementById(apples);
if(e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
</script>
答案 0 :(得分:0)
您的功能具有相同的签名,因为它们具有相同的名称。不是为不同的图像/元素定义3个函数,而是定义一个函数并将其重用于您传递给它的id名称。
如下所示:
function toggle_visibility(fruit) {
var e = document.getElementById(fruit);
if(e.style.display === 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
}
允许您执行以下操作:
toggle_visibility("banana"); // toggle the element with id 'banana'