Jquery Tab Yapımı

JQuery ile show() (göster) ve hide() (gizle) metotlarını kullanarak sayfamıza eklediğimiz html etiketlerini gösterip gizleyebiliriz.

Örnek: Sayfamızdaki tüm paragraf etiketlerini gizleyelim.


<script>
        $(document).ready(function(){
            $("p").hide();
})
</script>

$(document).ready(function(){

$("p").hide();

})

</script>

Css metodu ile html etiketlerinin biçim özelliklerini değiştirebiliriz.

Örnek: Sayfamızın arkaplan rengini kırmızı yapalım.


<script>
        $(document).ready(function(){
            $("body").css("background-color", "red");
})
</script>

$(document).ready(function(){

$("body").css("background-color", "red");

})

</script>

Yukarıdaki bilgilerden basit bir sekmeli (tab) menü yapabiliriz.

Sekmeli yapıyı ilk olarak html ve css kullanarak tasarlamamız gerekiyor.


    <div id="container">
        <button id="b1">SEKME 1</button>
        <button id="b2">SEKME 2</button>
        <button id="b3">SEKME 3</button>
        <div id="d1">
            <h1 id="h1">BAŞLIK 1</h1>
            <p id="p1">Lorem ipsum dolor ...</p>
        </div>
        <div id="d2">
            <h1 id="h3">BAŞLIK 2</h1>
            <p id="p2">Lorem ipsum dolor ...</p>
        </div>
        <div id="d3">
            <h1 id="h3">BAŞLIK 3</h1>
            <p id="p3">Lorem ipsum dolor ...</p>
        </div>
    </div>

<button id="b1">SEKME 1</button>

<button id="b2">SEKME 2</button>

<button id="b3">SEKME 3</button>

<h1 id="h1">BAŞLIK 1</h1>

<p id="p1">Lorem ipsum dolor ...</p>

</div>

<h1 id="h3">BAŞLIK 2</h1>

<p id="p2">Lorem ipsum dolor ...</p>

</div>

<h1 id="h3">BAŞLIK 3</h1>

<p id="p3">Lorem ipsum dolor ...</p>

</div>


    <style>
        #container {
            margin: 30px auto;
            width: 800px;
        }
        #d1,
        #d2,
        #d3 {
            background-color: tomato;
            font-family: calibri;
            padding: 5px;
            text-align: justify;
        }
        button {
            background-color: white;
            color: black;
            border: 2px solid tomato;
            border-bottom: 0px;
            padding: 16px 32px;
            transition-duration: .5s;
        }

        button:hover {
            background-color: tomato;
        }
 
        h1 {
            margin-top: 0px;
        }
    </style>

<style>

#container {

margin: 30px auto;

width: 800px;

}

#d1,

#d2,

#d3 {

background-color: tomato;

font-family: calibri;

padding: 5px;

text-align: justify;

}

button {

background-color: white;

color: black;

border: 2px solid tomato;

border-bottom: 0px;

padding: 16px 32px;

transition-duration: .5s;

}

button:hover {

background-color: tomato;

}

h1 {

margin-top: 0px;

}

</style>


<script>
        $(document).ready(function() {//Döküman hazır olduğunda
            $("#d1").show();//id'si d1 olan divi göster
            $("#d2").hide();//id'si d2 olan divi gizle
            $("#d3").hide();//id'si d3 olan divi gizle
            $("#b1").css("background-color", "tomato");//id'si b1 olan butonun arkaplan rengini domates rengi yap.
            $("#b2").css("background-color", "");//id'si b1 olan butonun arkaplan rengini kaldır.
            $("#b3").css("background-color", "");//id'si b1 olan butonun arkaplan rengini kaldır.
//1. TEKRAR
            $("#b1").on("click", function() {//id'si b1 olan butona tıklandığında yapılacak değişikler.
                $("#b1").css("background-color", "tomato");
                $("#b2").css("background-color", "");
                $("#b3").css("background-color", "");
                $("#d1").show();
                $("#d2").hide();
                $("#d3").hide();
            })
//2. TEKRAR
            $("#b2").on("click", function() {
                $("#b1").css("background-color", "");
                $("#b2").css("background-color", "tomato");
                $("#b3").css("background-color", "");
                $("#d1").hide();
                $("#d2").show();
                $("#d3").hide();
            })
//3. TEKRAR
            $("#b3").on("click", function() {
                $("#b1").css("background-color", "");
                $("#b2").css("background-color", "");
                $("#b3").css("background-color", "tomato");
                $("#d1").hide();
                $("#d2").hide();
                $("#d3").show();
            })

        })

    </script>

$(document).ready(function() {//Döküman hazır olduğunda

$("#d1").show();//id'si d1 olan divi göster

$("#d2").hide();//id'si d2 olan divi gizle

$("#d3").hide();//id'si d3 olan divi gizle

$("#b1").css("background-color", "tomato");//id'si b1 olan butonun arkaplan rengini domates rengi yap.

$("#b2").css("background-color", "");//id'si b1 olan butonun arkaplan rengini kaldır.

$("#b3").css("background-color", "");//id'si b1 olan butonun arkaplan rengini kaldır.

//1. TEKRAR

$("#b1").on("click", function() {//id'si b1 olan butona tıklandığında yapılacak değişikler.

$("#b1").css("background-color", "tomato");

$("#b2").css("background-color", "");

$("#b3").css("background-color", "");

$("#d1").show();

$("#d2").hide();

$("#d3").hide();

})

//2. TEKRAR

$("#b2").on("click", function() {

$("#b1").css("background-color", "");

$("#b2").css("background-color", "tomato");

$("#b3").css("background-color", "");

$("#d1").hide();

$("#d2").show();

$("#d3").hide();

})

//3. TEKRAR

$("#b3").on("click", function() {

$("#b1").css("background-color", "");

$("#b2").css("background-color", "");

$("#b3").css("background-color", "tomato");

$("#d1").hide();

$("#d2").hide();

$("#d3").show();

})

</script>

Yukarıda yaptığımız sekme uygulaması çalışmakla beraber sürekli tekrarlayan kod parçaları içermektedir ve sekme sayısı arttıkça jquery kodlarıda oldukça uzayacaktır. Bir kaç jquery özelliği kullanarak çok daha kısa kod yazarak bu menüyü oluşturabiliriz.

CSS kodları


<style>
        #container {
            margin: 30px auto;
            width: 800px;
        }
        .icerik {
            z-index: 2;
            background-color: tomato;
            font-family: calibri;
            padding: 5px;
            text-align: justify;
        }
        button {
            background-color: white;
            color: black;
            border: 2px solid tomato;
            border-bottom: 0px;
            padding: 16px 32px;
            transition-duration: .5s;
        }
        button:hover {
            background-color: tomato;
            color: white;
        }
        .aktif {
            background-color: tomato;
        }
        h1 {
            margin-top: 0px;
        }
    </style>

<style>

#container {

margin: 30px auto;

width: 800px;

}

.icerik {

z-index: 2;

background-color: tomato;

font-family: calibri;

padding: 5px;

text-align: justify;

}

button {

background-color: white;

color: black;

border: 2px solid tomato;

border-bottom: 0px;

padding: 16px 32px;

transition-duration: .5s;

}

button:hover {

background-color: tomato;

color: white;

}

.aktif {

background-color: tomato;

}

h1 {

margin-top: 0px;

}

</style>

HTML kodları


<div id="container">
        <button class="aktif">SEKME 1</button>
        <button>SEKME 2</button>
        <button>SEKME 3</button>
        <div class="icerik">
            <h1 id="h1">BAŞLIK 1</h1>
            <p id="p1">Lorem ipsum dolor...</p>
        </div>
        <div class="icerik">
            <h1 id="h3">BAŞLIK 2</h1>
            <p id="p2">Lorem ipsum dolor...</p>
        </div>

        <div class="icerik">
            <h1 id="h3">BAŞLIK 3</h1>
            <p id="p3">Lorem ipsum dolor...</p>
        </div>
    </div>

<button class="aktif">SEKME 1</button>

<button>SEKME 2</button>

<button>SEKME 3</button>

<h1 id="h1">BAŞLIK 1</h1>

<p id="p1">Lorem ipsum dolor...</p>

</div>

<h1 id="h3">BAŞLIK 2</h1>

<p id="p2">Lorem ipsum dolor...</p>

</div>

<h1 id="h3">BAŞLIK 3</h1>

<p id="p3">Lorem ipsum dolor...</p>

</div>

JQUERY kodları


<script>
        $(document).ready(function() {
            $("#container .icerik").hide(); //Tüm içerikler gizleniyor.
            $("#container .icerik").first().show(); //İlk içerik görünür yapılıyor.
            $("#container button").on("click", function() { //Buton seçildiğinde
                var sno = $(this).index(); //Seçilen sekmenin index numarası lanıyor 
                $("#container .icerik").hide(); //Tüm içerikler gizleniyor.
                $("#container .icerik").eq(sno).show(); //Seçilen sekmenin index numarasındaki içerik görünür yapılıyor.
                $("#container button").removeClass("aktif"); //aktif (seçilen sekme butonuna aktarılmak için) sınıfı birinci sekmeden siliniyor.
                $(this).addClass("aktif"); //aktif sınıfı seçilen sekmeye ekleniyor.
            })
        })

    </script>

$(document).ready(function() {

$("#container .icerik").hide(); //Tüm içerikler gizleniyor.

$("#container .icerik").first().show(); //İlk içerik görünür yapılıyor.

$("#container button").on("click", function() { //Buton seçildiğinde

var sno = $(this).index(); //Seçilen sekmenin index numarası lanıyor

$("#container .icerik").hide(); //Tüm içerikler gizleniyor.

$("#container .icerik").eq(sno).show(); //Seçilen sekmenin index numarasındaki içerik görünür yapılıyor.

$("#container button").removeClass("aktif"); //aktif (seçilen sekme butonuna aktarılmak için) sınıfı birinci sekmeden siliniyor.

$(this).addClass("aktif"); //aktif sınıfı seçilen sekmeye ekleniyor.

})

</script>

JQuery kodlarının çalışması için head etiketleri arasına aşağıdaki kodu eklemeyi unutmayın.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

Jquery Tab Yapımı

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap