2010-04-27 8 views
1

j'avais onglets avec contenu préchargé comme ceci:Affichage différemment onglets sélectionnés avec onglets ajax JQuery

$(function() { 

    $('div.tabs ul.tabNavigation a').click(function() { 
     $('div.tabs ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 
     return false; 
    }).filter(':first').click(); 
}); 

Cette classe ajouté = "selected" aux liens et css sont fait sélectionné onglet aspect différent

<div class="tabs"> 
    <ul class="tabNavigation"> 
     <li><a href="#content1">c1</a></li> 
     <li><a href="#content2">c2</a></li> 
     <li><a href="#content3">c3</a></li> 
    </ul> 
    <div id="content1"> 
     content 1 
    </div> 
    <div id="content2"> 
     content 2 
    </div> 
    <div id="content3"> 
     content 3 
    </div> 

Maintenant j'essaie de faire fonctionner l'ajax. Eh bien, ça marche, mais j'ai des difficultés à obtenir Class = "selected" à mes liens.

La fonction js avec ajax ressemble à ceci:

$(function() { 
    $("#tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html("there was a problem"); 
      } 
     } 
    }); 
}); 

Comment puis-je l'étendre afin qu'il donne cliqué classe lien « sélectionné »? Similaire à la version de contenu préchargée.

+0

Pouvez-vous mettre à jour votre question avec le code que vous utilisez pour la version ajax? Tout ce que vous avez ici est la version html statique. Merci. – jessegavin

+0

Avec ajax le seul changement en html est que les liens ont href = "somepage.html". Et le code javascript que j'ai donné. Le chargement du contenu fonctionne correctement, mais j'ai du mal à donner une classe de style personnalisée à l'onglet Sélection. – ivar

Répondre

0
$(function() { 
    $("#tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html("Laadimisel ilmnes viga"); 
      } 
     } 
    }); 
    $('#tabs A').click(function(){ 
     if($(this).hasClass('selected')){ return false; } 

     $('#tabs A.selected').removeClass('selected'); 
     $(this).addClass('selected');  
     return false; 
    }); 
}); 

Cela a fonctionné.