0

In a website im making i have a section with tabs that load different images. My problem is that if you click one tab and you click again the image will load again, and i don't want this to happen. Only load again after one of the other tabs it's clicked first.

This is how looks my section

This is my 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>

And this is the CSS for the image changing:

#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;
}

The CSS is the same for the three tabs except for the background image

R.J. Dunnill
  • 2,049
  • 3
  • 10
  • 21
Gaby
  • 55
  • 3

1 Answers1

0

Add the !important keyword in this way: background-image: url(../img/solucion1.png) !important; Read that for more info: What does !important mean in CSS?

Andrea Oggioni
  • 128
  • 1
  • 9