CSS ve JavaScript Kullanarak Sekmeli (Tab) İçerik Oluşturmak

Yorumlar

Bootstrap Kullanmadan Sekmeli İçerik Oluşturma

Bootstrap kütüphanesini kullanmadan CSS ve JavaScript ile sekmeli içerik oluşturmak oldukça basittir. CSS ile sekmelerin görsel yapısını, JavaScript ile ise hangi sekmenin görüneceğini belirleyebiliriz. Aşağıda örnek bir kod yapısı yer almaktadır:

GENEL

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sekmeli İçerik</title>
  <style>
    .tabcontent {
      border: 1px solid #ccc;
      border-top: none;
      padding: 10px;
      display: none;
    }
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f2f2f2;
    }
    .tab button {
      border: none;
      float: left;
      padding: 4px 10px;
      cursor: pointer;
      font-size: 16px;
    }
    .tab button:hover {
      background-color: #aaa;
    }
  </style>
</head>
<body>

  <div class="tab">
    <button onclick="icerik('html')">HTML</button>
    <button onclick="icerik('css')">CSS</button>
    <button onclick="icerik('jscript')" id="default">JavaScript</button>
    <button onclick="icerik('jquery')">JQuery</button>
  </div>

  <div id="html" class="tabcontent">
    <h3>HTML</h3>
    <p>HTML Hakkında Bilgiler</p>
  </div>

  <div id="css" class="tabcontent">
    <h3>CSS</h3>
    <p>CSS Hakkında Bilgiler</p>
  </div>

  <div id="jscript" class="tabcontent">
    <h3>JavaScript</h3>
    <p>JavaScript Hakkında Bilgiler</p>
  </div>

  <div id="jquery" class="tabcontent">
    <h3>JQuery</h3>
    <p>JQuery Hakkında Bilgiler</p>
  </div>

  <script>
    function icerik(divid) {
      var tabcontent = document.getElementsByClassName('tabcontent');
      for (var x = 0; x < tabcontent.length; x++) {
        tabcontent[x].style.display = 'none';
      }
      document.getElementById(divid).style.display = 'block';
    }
    document.getElementById('default').click();
  </script>

</body>
</html>