Yazılım Örnekleri

Jquery ile tabımızı index alma yöntemi ile yapacağız. Yöntem oldukça basit listedeki tıklanan "li" nin index değerini alıyoruz ve bu index değeri ile açılacak divimiz belirliyoruz. kodlar üzerinde de küçük açıklamalar yaptım. Kodları biraz inceleyerek rahatça kullanabilrisiniz.

  <style>
        ul, li {
            margin:0;
            padding:0;
            list-style-type:none; 
        } 
         ul#tab_menu li  {
                background-color:#099;
                margin-right:5px;
                text-align:center; 
            width:60px;
            float:left;
            }
        ul#tab_menu li a  {
            display:block;
            text-decoration:none;
            color:white;
            padding:10px; }

        .aktif{
            background-color:#069 !important; }

        .tab {
            display:none;
            padding:30px;
            border:3px solid #C96;
            margin-top:10px;     }

        .clear{
            clear:both;
        }
    </style>

<script src="jquery-1.11.1.js"></script>
<script>
    $(function () {
        $("ul#tab_menu li:first").addClass("aktif");  // Sayfa yüklendiğinde ilk butona "aktif" css ni ekliyoruz.
        $(".tab:first").show();  // Sayfa yüklendiğinde ilk tabımızı açıyoruz.
        $("ul#tab_menu li").click(function () {
            $("ul#tab_menu li").removeClass("aktif");  // herhangi bir taba tıklandığın eklenen "aktif" cssini kaldırıyoruz.
            $(this).addClass("aktif");  // this ile yeni tıklanan taba "aktif" css ekliyoruz
            var indis = $(this).index();  // tıklananan tabın index değerini alıyoruz.
            $(".tab").hide(100);  // tabların hepsini saklayıp
            $(".tab:eq(" + indis + ")").show(300);  // aldığımız index değerine eş divimi açıyoruz.
        });
       
    });
</script>

  <div id="alp_sonmez"></div>
    <ul id="tab_menu">
        <li><a href="#">1. tab</a></li>
        <li><a href="#">2. tab</a></li>
        <li><a href="#">3. tab</a></li>
        <li><a href="#">4. tab</a></li> 
    </ul>
    
    
    <div class="clear"></div>
      <div class="tab">Tab 1</div>
      <div class="tab">Tab 2</div>
      <div class="tab">Tab 3</div>
      <div class="tab">Tab 4</div>