在HTML中，可以使用JavaScript和CSS来实现点击按钮切换图片不显示的效果，以下是详细的步骤和小标题：
1、准备两张图片
你需要准备两张你想要切换的图片，假设第一张图片的URL为image1.jpg，第二张图片的URL为image2.jpg。
2、创建HTML结构
创建一个包含两个按钮和一个图片容器的HTML结构。
“`html
<!DOCTYPE html>
<html>
<head>
<title>图片切换</title>
</head>
<body>
<button id="btn1">显示图片1</button>
<button id="btn2">显示图片2</button>
<div id="imageContainer"></div>
</body>
</html>
“`
3、添加CSS样式
使用CSS样式来设置图片容器的大小和初始状态。
“`html
<style>
#imageContainer {
width: 300px;
height: 200px;
backgroundcolor: #ccc; /* 默认背景色 */
}
</style>
“`
4、编写JavaScript代码
使用JavaScript代码来监听按钮的点击事件，并根据点击的按钮切换图片的显示。
“`html
<script>
document.getElementById(‘btn1’).addEventListener(‘click’, function() {
showImage(‘image1.jpg’);
});
document.getElementById(‘btn2’).addEventListener(‘click’, function() {
showImage(‘image2.jpg’);
});
function showImage(imageUrl) {
var imageContainer = document.getElementById(‘imageContainer’);
imageContainer.style.backgroundImage = ‘url(‘ + imageUrl + ‘)’;
}
</script>
“`
5、完成效果预览
将上述代码保存为一个HTML文件，并在浏览器中打开该文件，你将看到一个带有两个按钮和一个图片容器的页面，点击不同的按钮将切换显示不同的图片，当点击"显示图片1"按钮时，将显示image1.jpg；当点击"显示图片2"按钮时，将显示image2.jpg。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/427218.html
微信扫一扫