На веб-сайте я делаю, у меня есть раздел с вкладками, которые загружают различные изображения. Моя проблема в том, что если вы нажмете одну вкладку и нажмете снова, изображение загрузится снова, и я не хочу, чтобы это произошло. Загружать снова только после того, как одна из других вкладок будет нажата первой.
Вот так выглядит мой раздел
Это мой 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 одинаков для трех вкладок, за исключением фонового изображения