<!– ↓ここからサンプル↓ –>
<div class="sample">
 
 <div id="tab01">
  <div id="tab02">
   <div id="tab03">
 
    <!– ↓タブ↓ –>
    <ul id="tab">
     <li><a href="#tab01">W3C</a></li>
     <li><a href="#tab02">XHTML</a></li>
     <li><a href="#tab03">CSS</a></li>
    </ul>
    <!– ↑タブ↑ –>
 
    <div class="contents">
    <div class="inner">
 
     <!– ↓タブ 1 の内容↓ –>
     <div class="tab01">
      <section>
       <h1>World Wide Web Consortium</h1>
       <p>…省略…</p>
      </section>
     </div>
     <!– ↑タブ 1 の内容↑ –>
 
     <!– ↓タブ 2 の内容↓ –>
     <div class="tab02">
      <section>
       <h1>XHTML</h1>
       <p>…省略…</p>
      </section>
     </div>
     <!– ↑タブ 2 の内容↑ –>
 
     <!– ↓タブ 3 の内容↓ –>
     <div class="tab03">
      <section>
       <h1>Cascading Style Sheets</h1>
       <p>…省略…</p>
      </section>
     </div>
     <!– ↑タブ 3 の内容↑ –>
 
    <!– .inner –></div>
    <!– .contents –></div>
 
   </div>
  </div>
 </div>
 
<!– .sample –></div>
<!– ↑ここまでサンプル↑ –>
CSS は今回も簡単

先のサンプルでは、position: absolute; で全部を重ねて、あとは z-index / opacity プロパティを使用して表示を切り替えましたが、今回は各タブの内容を float プロパティで横並びにしといて、簡単に言えばタブのクリックごとに各内容をスライドさせて表示させます。

下記のような感じで、下準備。

.sample .contents {
  border: 1px solid #333;
  overflow: hidden; /*（3）はみ出た部分は非表示に*/
  width: 450px; /*（2）タブの内容の横幅に合わせる*/
}
.sample .contents .inner {
  width: 1350px; /*（4）タブの内容の横幅×タブの数*/
}
.sample .inner div { /*これが各タブの内容部分*/
  background: #fff;
  float: left;
  margin: 0;
  padding: 0;
  width: 450px; /*（1）タブの内容の横幅*/
}

/* タブの表示切替関連 */
.sample .inner div {
  opacity: 0;
}
.sample .inner div:first-child {
  opacity: 1;
}
.sample #tab li:first-child a {
  background: #333;
  color: #fff;
}
.sample #tab02:target .inner .tab02 {
  margin-left: -450px;
  opacity: 1;
}
.sample #tab03:target .inner .tab03 {
  margin-left: -900px;
  opacity: 1;
}
.sample #tab01:target .inner div:not([class=”tab01″]),
.sample #tab02:target .inner div:not([class=”tab02″]),
.sample #tab03:target .inner div:not([class=”tab03″]) {
  margin-left: 0;
}
.sample #tab01:target #tab li a[href$=”tab01″],
.sample #tab02:target #tab a[href$=”tab02″],
.sample #tab03:target #tab a[href$=”tab03″] {
  background: #333;
  color: #fff;
}
.sample :not([id=”tab01″]):target #tab li a[href$=”tab01″] {
  background: #fff;
  color: #22aacc;
}