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

【问题标题】：Prevent tab image from loading again when button is clicked repeatedly重复单击按钮时防止标签图像再次加载
【发布时间】：2019-06-10 19:31:05
【问题描述】：

在我制作的网站中，我有一个带有加载不同图像的选项卡的部分。我的问题是，如果您单击一个选项卡并再次单击该图像将再次加载，我不希望这种情况发生。仅在第一次单击其他选项卡后再次加载。

This is how looks my section

这是我的 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 相同，但背景图片除外

【问题讨论】：

标签： javascript html css double-click loadimage

【解决方案1】：

以这种方式添加 !important 关键字： background-image: url(../img/solucion1.png) !important; 阅读更多信息：What does !important mean in CSS?

【讨论】：