点击图片和文字切换呢
时间: 2023-08-20 12:05:10 浏览: 34
您可以使用JavaScript来实现点击图片和文字切换的功能。以下是一个简单的示例代码:
HTML代码:
```
<div id="container">
<img id="image" src="image1.jpg" alt="Image">
<p id="text">Click to change image</p>
</div>
```
JavaScript代码:
```
var container = document.getElementById("container");
var image = document.getElementById("image");
var text = document.getElementById("text");
container.addEventListener("click", function() {
if (image.src.endsWith("image1.jpg")) {
image.src = "image2.jpg";
text.innerHTML = "Click to change back to image1";
} else {
image.src = "image1.jpg";
text.innerHTML = "Click to change to image2";
}
});
```
这段代码给容器元素添加了一个点击事件监听器,当容器被点击时,它会检查当前图片的src属性是否为image1.jpg。如果是,它会将图片的src属性更改为image2.jpg,并将文本更改为“Click to change back to image1”。否则,它会将图片的src属性更改为image1.jpg,并将文本更改为“Click to change to image2”。