html - 如何使用 HTML 和 CSS 实现此上下文？

Question

试图实现这个 HTML 形状，我想用onclick那里的方法在这个形状内放置许多照片

标签： html

Answer 1

最好使用javascript EventListener而不是onclick.

例如。

let btn = document.getElementById('pictureButton');
btn.addEventListener('click', function(){
  document.getElementById('togglepic').style.display = 'block';
});

#togglepic {
  display:none;
}

<button id="pictureButton">Click me</button><br/>
<img id="togglepic" src="https://imgur.com/VYWEWRF.png"/>

显然，<img>您可以添加“轮播”元素而不是元素，但原理是一样的 - 只需将display:属性从更改none为block