Demo for Tabbed Layout with CSS

Με το πάτημα του Tab2 το κείμενο έρχεται από κάτω προς τα επάνω και καλύβη το άλλο, δείτε το demo και θα καταλάβετε.

Αντιγραφή τον παρακάτω κώδικα:

<style>
/* FoulsCode.blogspot.gr */
* {margin:0;padding:0}
body {
  min-height:3000px;
  background-color:skyblue;
  font:normal normal 13px Arial,Sans-Serif;
  color:black;
}
/* Set the target element as a fixed position element to prevent page jump */
span {
  display:block;
  position:fixed;
  top:0;
  left:0;
}
/* --Basic tab dimension-- */
#tab {
  width:400px;
  margin:200px auto 200px;
}
#tab > ul {
  margin:0 0;
  padding:0 0;
  height:30px;
  overflow:hidden;
}
#tab > ul li {
  float:left;
  display:inline;
  list-style:none;
  margin:0 4px 0 0;
  padding:0 0;
}
#tab > ul li a {
  display:block;
  background-color:black;
  font-weight:bold;
  font-size:11px;
  line-height:30px;
  height:30px;
  color:white;
  text-decoration:none;
  padding:0 30px;
}
#tab > div {
  clear:both;
  background-color:darkred;
  padding:0 15px;
  height:0;
  overflow:hidden;
  visibility:hidden;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
  -ms-transition:all .4s ease-in-out;
  -o-transition:all .4s ease-in-out;
  transition:all .4s ease-in-out;
}

/* ================================
   Here's the CSS :target job list
   ================================ */
/* Reset the first tab button and the first tab content to the default behaviour if the hash is active */
span:target ~ #tab > ul li:first-child a {
  background-color:black;
  color:white;
}
span:target ~ #tab > div:first-of-type {
  visibility:hidden;
  height:0;
  padding:0 15px;
}
/* Always show the first tab container by default */
span ~ #tab > div:first-of-type,
/* Show a specific tab content based on the 'selected' target element */
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4 {
  visibility:visible;
  height:250px;
  padding:10px 15px;
}
/* Always set the first tab with a 'current color' by default */
span ~ #tab > ul li:first-child a,
/* Set the current tab button color based on the 'selected' target element */
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
  background-color:darkred;
  color:black;
}
</style>
<!-- Here's the target elements. Set it as a fixed position element -->
<span id="tab-1"></span>
<span id="tab-2"></span>
<span id="tab-3"></span>
<span id="tab-4"></span>
<!-- The main markup -->
<div id="tab">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab-content-1">
FoulsCode.blogspot.gr Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
<div class="tab-content-2">FoulsCode.blogspot.gr Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
<div class="tab-content-3">FoulsCode.blogspot.gr Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
<div class="tab-content-4">FoulsCode.blogspot.gr Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
</div>

DEMO

Αποθήκευση και είστε έτοιμοι.