jquery éditer dynamiquement les onglets

Question

Je suis un peu nouveau à jquery. J'utilise des onglets jquery et j'ai peu de boutons. Ce que je dois faire est quand chaque bouton est pressé les onglets sont changés dynamiquement. Par exemple au chargement de la page les onglets sont

<ul id="featured_tabs"> 
     <li><a href="#fc1" style="width: 454px">tab1/a></li> 
     <li class="last"><a href="#fc2" style="width: 454px">tab2</a></li> 
</ul> 

mais quand on appuie sur un autre bouton, ils deviennent

<ul id="featured_tabs"> 
     <li><a href="#fc1" style="width: 454px">another tab1/a></li> 
     <li><a href="#fc1" style="width: 454px">another tab2/a></li> 
     <li class="last"><a href="#fc2" style="width: 454px">another tab3</a></li> 
</ul> 

J'ai essayé une fonction pour définir le innerHTML de featured_tabs mais cela ne fonctionne pas bien. Des suggestions?

Answer 1

Essayez ce code:

$('button').click(function(){ 
    $('#featured_tabs').append('<li><a href="#fc3" style="width: 454px">another tab3</a></li>') 
    $('#featured_tabs li').removeClass('last').last().addClass('last') 
}) 

Answer 2

Vous pouvez jeter un oeil à this! La méthode fournie devrait faire ce que vous voulez!

Answer 3

Une fois le contenu de featured_tabs est modifié, vous devez appeler refresh

$("#featured_tabs").tabs("refresh");