根据点击不同的作品,动态的显示作品信息
时间: 2024-04-10 16:34:16 浏览: 28
您可以使用JavaScript来实现根据点击不同作品动态显示作品信息的功能。以下是一个简单的示例代码:
HTML部分:
```html
<div class="works">
<div class="work" onclick="showInfo('work1')">作品1</div>
<div class="work" onclick="showInfo('work2')">作品2</div>
<div class="work" onclick="showInfo('work3')">作品3</div>
</div>
<div id="info"></div>
```
JavaScript部分:
```javascript
function showInfo(work) {
var infoContainer = document.getElementById("info");
// 根据不同的作品名称,显示相应的作品信息
if (work === "work1") {
infoContainer.innerHTML = "作品1的信息";
} else if (work === "work2") {
infoContainer.innerHTML = "作品2的信息";
} else if (work === "work3") {
infoContainer.innerHTML = "作品3的信息";
}
}
```
在上述代码中,通过给每个作品元素添加`onclick`属性,当用户点击作品时会触发`showInfo`函数。该函数根据不同的作品名称,将相应的作品信息显示在名为`info`的容器中。
您可以根据实际情况修改作品名称和对应的作品信息,以及样式等。希望对您有帮助!