Tabs css3

by beatricevivaldi

HTML

<a href="#tab1">tab1</a><br>
    <a href="#tab2">tab2</a><br>
    <a href="#tab3">tab3</a><br>
   
<div>
    <a id="tab2"></a>
    <p>Testo del tab2</p>
        
    <a id="tab3"></a>
    <p>Testo del tab3</p>
        
    <a id="tab1"></a>
    <p>Testo del tab1</p>
</div>

CSS

p{ 
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s;
}

p:last-of-type{
  opacity: 1;  
}
a:target + p{ 
    opacity: 1;
}
a:target + p ~ p{
    opacity: 0;
}
div {
    position: relative;
}