• JavaScript tab menü yapımı

0

JavaScript ile basit hızlı ve akıllı tab menü sistemi, bu eklentinin bizlere faydası alandan tasarruf sağlamak amaçlı tasarlanmıştır.

var tab_menu = window.document.getElementById("tab_menu").querySelectorAll("li");

for(var i = 0; i < tab_menu.length; i++){
    window.document.querySelectorAll("[class^=tab_content]")[i].style.display = "none";
    (function(index){
        tab_menu[i].onclick = function(){
            for(var i = 0; i < tab_menu.length; i++){
                tab_menu[i].classList.remove("active");
                window.document.querySelectorAll("[class^=tab_content]")[i].style.display = "none";   
            }
            window.document.querySelectorAll("[class^=tab_content]")[index].style.display = "inherit";
            this.classList.add("active");
        }
    })(i);
}
window.document.querySelectorAll("[class^=tab_content]")[0].style.display = "inherit";
body{
    font-family:Arial;
    font-size:12px;
}

ul#tab_menu{
    margin:0;
    padding:0;
    list-style:none;
    overflow:hidden;
}

ul#tab_menu li{
    float:left;
    background-color:#dddddd;
    border-bottom:2px solid #ffffff;
    margin-right:5;
    margin-bottom:5px;
    padding:5px;
    cursor:pointer;
    transition: all 0.5s;
}

ul#tab_menu li:hover{
    background-color:#cccccc;
}

ul#tab_menu li.active{
    border-bottom:2px solid #666666;
}

div.tab_content{
    background-color:#dddddd;
    padding:5px;
    height:200px;
}
<ul id="tab_menu">
    <li class="active">Tab Başlık 1</li>
    <li>Tab Başlık 2</li>
    <li>Tab Başlık 3</li>
    <li>Tab Başlık 4</li>
</ul>

<div class="tab_content">Tab içerik 1</div>
<div class="tab_content">Tab içerik 2</div>
<div class="tab_content">Tab içerik 3</div>
<div class="tab_content">Tab içerik 4</div>

  • Cevaplar

  • Senin Cevabın


Adı ve soyadı * Misafir olarak cevap yazabilirsiniz.
E-Posta *
 

Cevap Bekleyen Sorular

Sıcak Tartışmalar

Popüler Etiketler

Faydalı Kaynaklar