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

HTML5 & CSS3

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

Bootstrap kütühanesini kullanmadan CSS ve JavaScript kullanarak sekmeli içerik nasıl oluşturulur? Aslında çok basit. CSS ile özellikleri belirler, javascript ile de sekmelerin açılmasını sağlayabilirsiniz. Örnek kodlar aşağıdaki gibidir:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML TAB</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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 x, tabcontent;
            tabcontent=document.getElementsByClassName("tabcontent");
            for(x=0;x<tabcontent.length;x++) {
                tabcontent[x].style.display="none";
            }
            document.getElementById(divid).style.display="block";
        }
        document.getElementById("default").click();
       </script>
    </body>
</html>

 

 

Benzer Yazılar