重复单击按钮时,防止再次加载标签图像

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (4)

在一个网站我正在制作一个带有标签的部分,可以加载不同的图像。我的问题是,如果你单击一个选项卡,然后再次单击图像将再次加载,我不希望这发生。仅在首先单击其中一个选项卡后再次加载。

这是看我的部分

这是我的HTML:

<section id="vertical_tab_nav">
    <ul>
    <br><br><br>
       <li id="#btnPro"><a href="index.html">Redes afectivas</a></li>
       <li id="#btnPro" class="selected"><a href="index.html">Hooke</a></li>
       <li id="#btnPro"><a href="index.html">Flizen</a></li>
    </ul>
    <div>
       <article class="uno"></article>
       <article class="dos"></article>
       <article class="tres"></article>
    </div>
</section>

这是改变图像的CSS:

#vertical_tab_nav div article{
display: none;
margin: 0px;
color: #555;
transition: background 2s ease-out;
}

#vertical_tab_nav div .uno{
background-image: url(../img/solucion1.png);
background-repeat: no-repeat;
background-size: 90%;
margin: 0px;
margin-top: 0px;
color: #555;
min-height: 500px;
background-position: top;
margin-top: 10px;
}

除了背景图像之外,三个选项卡的CSS相同

提问于
用户回答回答于

扫码关注云+社区

领取腾讯云代金券