I've updated your Fiddle which is a working example now.
There are various issues in your Fiddle but the biggest issue is that the technique you are trying to use depends on a set HTML structure.
You tried to add an extra <div class="tab-content">
which wasn't taken care of in your CSS.
Also the links in the labels were empty and didn't have a width/height so you can't click on them.
The HTML I've used:
<div class="social_slider">
<div class="tabs">
<div class="tab-links">
<input checked type="radio" name="tab" id="fbtab" />
<input type="radio" name="tab" id="twtab" />
<label for="fbtab" class="facebook_icon"><a href="#tab1"></a></label>
<label for="twtab" class="twitter_icon"><a href="#tab2"></a></label>
</div>
<a name="tab1"></a>
<article class="facebook_box">
Facebook
</article>
<a name="tab2"></a>
<article class="twitter_box">
Twitter
</article>
</div>
</div>
The most important changes to the CSS was the removal of the .tab-content
and updating the .twitter_box
with the position: absolute;
and the top/left/right/bottom
:
.social_slider .twitter_box {
border-radius: 8px;
background-color: #19bfe5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99998;
display:none;
height:300px;
border: 10px solid #68c2ff;
}
Making the anchors clickable:
.social_slider .tab-links label a {
display: block;
height: 100%;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…