Skip to content

Instantly share code, notes, and snippets.

@naturallucky
Last active May 12, 2019 03:45
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save naturallucky/47654b677de56f1a7a72e2187f82def2 to your computer and use it in GitHub Desktop.
<style>
input[type="radio"][name="Document"] {
display:none;
}
.tabLabel{
width:30pt;height:15pt;
border:2pt solid black;
background:#cca;
transition: background-color 1s;
border-radius: 15% 15% 0 0;
z-index: 5;
}
.tabLabelTop{
width:100pt;
background:#aa5;
padding-left:3pt;
}
.tabLabel label{
width:100pt;
display:inline-block;
}
div.tabcolumn {
opacity:0;
width:100%;
height:120pt;
background: #eeb;
border:2pt solid black;
padding:5pt;
position:absolute;
top:-2pt;
transition: opacity 1s;
}
div.tabcolumn::after {
position:absolute;
content:"";
bottom:-2pt;
left:-1pt;
width:100.5%;
height:0pt;
border-bottom:2pt solid black;
}
#Document1:checked ~ div div:nth-child(2){
border-bottom-color:#eeb;
background:#eeb;
opacity:1;
}
#Document2:checked ~ div div:nth-child(3){
border-bottom-color:#eeb;
background:#eeb;
opacity:1;
} #Document3:checked ~ div div:nth-child(4){
border-bottom-color:#eeb;
background:#eeb;
opacity:1;
}
#Document4:checked ~ div div:nth-child(5){
border-bottom-color:#eeb;
background:#eeb;
opacity:1;
}
</style>
<div style="height:200pt;">
<input type="radio" name="Document" id="Document1" value="1" checked>
<input type="radio" name="Document" id="Document2" value="2">
<input type="radio" name="Document" id="Document3" value="3">
<input type="radio" name="Document" id="Document4" value="4">
<div style="display:flex;">
<div class="tabLabel tabLabelTop"> Document</div>
<div class="tabLabel"><label for="Document1"> 1 </label></div>
<div class="tabLabel"><label for="Document2"> 2 </label></div>
<div class="tabLabel"><label for="Document3"> 3 </label></div>
<div class="tabLabel"><label for="Document4"> 4 </label></div>
</div>
<div style="position:relative;z-index: 0;">
<div></div>
<div class="tabcolumn">◆Document1<br>XXX</div>
<div class="tabcolumn">◆Document2<br>YYY</div>
<div class="tabcolumn">◆Document3<br>ZZZ</div>
<div class="tabcolumn">◆Document4<br>KKK</div>
</div>
</div>
@naturallucky
Copy link
Author

tab paging
コンテンツをタブで切り替える。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment