时间戳

首页 > 解决方案 > 在 AMP 中点击按钮时显示和隐藏图像

html - 在 AMP 中点击按钮时显示和隐藏图像

问题描述

是否可以在按钮点击 i AMP 时显示一张图像并隐藏多张图像？

例如，我有 4 个按钮（button1、button2、button3 和 button4）和 4 个图像（img1、img2、img3、img4）。我想做类似的事情，点击 button1 并显示 img1，点击 button2 显示 img2 但隐藏 img1 等等。以简单的方式点击按钮显示图像并隐藏图像女巫目前在屏幕上。

我试图这样做，但我坚持这样的事情。但它不会正常工作。

 <button class="button1" on="tap:img1.toggleVisibility">BUTTON1</button>
 <button class="button2" on="tap:img2.toggleVisibility">BUTTON2</button>
 <button class="button3" on="tap:img3.toggleVisibility">BUTTON3</button>
 <button class="button4" on="tap:img4.toggleVisibility">BUTTON4</button>

<div>
    <div id="img1" style=" position: absolute" hidden >
    <amp-img src="img1.jpg"  width="600" height="600"> </amp-img> 
    </div>

    <div id="img2" style=" position: absolute" hidden >
    <amp-img src="img2.jpg"  width="600" height="600"> </amp-img> 
    </div>

    <div id="img3" style=" position: absolute" hidden >
    <amp-img src="img3.jpg"  width="600" height="600"> </amp-img> 
    </div>

    <div id="img4" style=" position: absolute" hidden >
    <amp-img src="img4.jpg"  width="600" height="600"> </amp-img> 
    </div>
 </div>

我已经厌倦了on="tap:AMP.setState({ hide: true })"，on="tap:AMP.setState({ hide: false })"但它只适用于两个图像。

标签： htmlcssamp-html

解决方案

很长一段时间没有回答这个问题，我会尽力提供帮助，我希望这个问题仍然相关。如果我理解正确，您只想显示与一次单击的按钮 ID 相关的图像。为简单起见，我不会直接使用图像。相反，我们使用多色 div。解决方案是将隐藏属性绑定到确切的 ID。如果您愿意，请随意使用以下增强代码和 css 以及图像：

    .container{
        display: flex;
        margin-left: 100px;
    }
    .box{
        width: 30px;
        height: 30px;
        margin: 25px;
        padding: 5px;
        color: azure;
        font-weight: 900;
    }
    .img1{
        background: red;
    }
    .img2{
        background: green;
    }
    .img3{
        background: blue;
    }
    .img4{
        background: yellow;
    }
  

<button class="button1" on="tap:AMP.setState({id:1})">BUTTON1</button>
<button class="button2" on="tap:AMP.setState({id:2})">BUTTON2</button>
<button class="button3" on="tap:AMP.setState({id:3})">BUTTON3</button>
<button class="button4" on="tap:AMP.setState({id:4})">BUTTON4</button>

<div class="container">



<div id="img 1" class="img1 box" hidden [hidden] = "id == 1 ? false : true" >
        img1
       </div>


   <div id="img 2" class="img2 box" hidden [hidden] = "id == 2 ? false : true" >
    img2
   </div>

   <div id="img 3" class="img3 box" hidden [hidden] = "id == 3 ? false : true">
    img3
   </div>

   <div id="img 4" class="img4 box" hidden [hidden] = "id == 4 ? false : true">
    img4
   </div>
</div>

热烈的问候，V。

推荐阅读