在一个网站即时通讯制作,我有一个部分与标签,加载不同的图像。我的问题是,如果您单击一个选项卡,然后再次单击,图像将再次加载,我不希望发生这种情况。只有在第一次单击其他选项卡后才能再次加载。
这是我的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都是相同的
https://stackoverflow.com/questions/56532478
复制相似问题