• 25-06-2014, 14:51:07
    #1
    Merhaba arkadaşlar aşağıdaki resimdeki gibi bir tab uygulaması yapmak istiyorum. normalde tab uygulaması yapabiliyorum ama işin içerisine ajax girdiğinde işler karışıyor ve bu karışıklığı çözemedim.

    şöyle ki; her bir tab başlığının aktif durumdaki arka plan rengi farklı olması gerekiyor. aktif olan tab'ın içerik alanın arka plan rengi de aynı şekilde değişmesi gerekiyor. içerik alanındaki verilerinde ajax dosyasından çekilmesi gerekiyor. yani beni oldukça uğraştırdı ve bu konu beni aşan bir konu ... bu yüzden yardımlarınızı rica ediyorum.



    index.html
    <div class="TabWrapper">
    
       <div class="TabMenu">
            <ul id="tab">
             <li class="kirmizi"><a href="#">1. Tab</a></li>
                <li><a href="#">2. Tab</a></li>
                <li><a href="#">3. Tab</a></li>
            </ul>
        </div> 
       
       <div id="TabIcerik"></div>
    
    </div>

    ajax.php dosyam
    <?php
       $page	=	intval(trim(strip_tags(addslashes($_GET['page']))));
       if(empty($page) || !is_numeric($page))
       {     
          $page = 1;
       } 
       switch($page)  
       {  
          default :
                echo "<div class='icerik kirmizi'>1. Tab İçeriği</div>";
          break;  
    
          case 1: 
                echo "<div class='icerik kirmizi'>1. Tab İçeriği</div>";
          break;  
    
          case 2: 
                echo "<div class='icerik mavi'>2. Tab İçeriği</div>";
          break;  
    
          case 3: 
                echo "<div class='icerik yesil'>3. Tab İçeriği</div>";
          break;
       }
    ?>
  • 03-07-2014, 00:49:37
    #2
    hocam sen konu farklı yerde.

    php ile bu şekilde yapabilirsin ama bu herseferinde sayfanın yenilenmesine sebep olur buda tab mantığından çıkıp link mantığına dönmektir yani link'den farksız birşey olur.

    normal tab mantığı en basit ile

    tüm content'ler sayfaya basılır DOM hazır olduğunda aktif tab'ın target'indeki content display:block yapılır ve diğerleri display:none yapılır.

    daha sonra tab'lara bir eventListener atanır (click,hover vb) ve event tetiklendiğinde bu işlem tekrar edilir.


    en basit hali ile olay budur.