Membuat tab biasanya lebih populer dengan menggunakan jquery, namun sebenarnya cukup dengan css saja kita sudah bisa membuat tab yang tak kalah bagusnya.


Pada tulisan kali ini kami akan menjelaskan secara singkat cara membuat tab hanya dengan css, tanpa bantuan jquery atau javascript lainnya.

Struktur HTML

<main>

  <h4><a href="http://www.tutorial-webdesign.com">Tutorial Web Design.com</a></h4>
  <h2>CSS Tabs</h2>
  <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">Home</label>
  <input id="tab2" type="radio" name="tabs">
    <label for="tab2">About</label>
  <input id="tab3" type="radio" name="tabs">
    <label for="tab3">Contact</label>
  <input id="tab4" type="radio" name="tabs">
    <label for="tab4">Social Media</label>

  <section id="content1">
    <h3>Selamat Datang TWDers</h3>
    <p>Content....</p>
  </section>
  <section id="content2">
    <h3>About TWD</h3>
    <p>Content....</p>
  </section>
  <section id="content3">
    <h3>Contact TWD</h3>
    <p>Content....</p>
  </section>
  <section id="content4">
    <h3>Social Media</h3>
    <p>Content...</p>
  </section>
</main>