jQuery UL Tabs doppelte Navigation - Probleme?

Question

Ich habe versucht, eine Jquery Tabs Navigation zu klonen und ich fand einen Beitrag auf dieser Website.

Hier ist das Thema: TOPIC

ich die Schritte @Didier Ghys folgen mit Fiddle ist Exemple

$("#tabs").tabs({ 
create: function(e, ui) { 
    var bottomNav = $('<div class="ui-tabs-nav bottom" />').appendTo(this); 
    $(this).find('.ui-tabs-nav a') 
     .clone() 
     .click(function() { 
      $("#tabs").tabs('select', $(this).index()); 
     }).appendTo(bottomNav); 
} 
});​ 

jsfiddle.net/k57n24j3, aber ich kann es nicht ganz funktioniert.

Ich habe meine Registerkarten duplizieren, aber ich bekomme einen Fehler, wenn ich darauf klicke, und nichts passiert. Ich arbeite dafür mit WordPress und AFC.

Hier ist, was ich jetzt bekommen:

<div class="panel-content" id="cartes"> 
    <a name="cartes"></a> 
    <div class="wrap"> 
    <header class="entry-header cartes"> 
     <h2 class="entry-title">Cartes</h2> 
    </header> 

    <div class="entry-content cartes"> 



     <ul class="menu-carte ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header" role="tablist"> 

     <li class="button-carte ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false"> 
      <a href="#tabs-1" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1"> 
      <img src="svg" class="attachment-full size-full" alt="" sizes="100vw"> 
      </a> 
     </li> 

     <li class="button-carte ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="tabs-1" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"> 
      <a href="#tabs-2" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-2"> 
      <img src="svg" class="attachment-full size-full" alt="" sizes="100vw"> 
      </a> 
     </li> 

     <li class="button-carte ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="tabs-1" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"> 
      <a href="#tabs-3" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-3"> 
      <img src="svg" class="attachment-full size-full" alt="" sizes="100vw"> 
      </a> 
     </li> 

     </ul> 


     <div id="tabs-1" class="contenu ui-tabs-panel ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true" style="display: none;"> 
     <h2 class="entry-title"> 
      Title 
     </h2> 
     <div class="flexible-main tabs-1"> 
      content 
     </div> 
     </div> 


     <div id="tabs-2" class="contenu ui-tabs-panel ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-2" role="tabpanel" aria-hidden="true" style="display: none;"> 
     <h2 class="entry-title"> 
      Title 
     </h2> 
     <div class="flexible-main tabs-2"> 
      content 
     </div> 
     </div> 

     <div id="tabs-3" class="contenu ui-tabs-panel ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none;"> 
     <h2 class="entry-title"> 
      Title 
     </h2> 
     <div class="flexible-main tabs-3"> 
      content 
     </div> 
     </div> 

    </div> 
    </div> 

    <div class="ui-tabs-nav bottom"> 
    <a href="#tabs-1" role="presentation" tabindex="-1" class="iu-tabs-anchor" id="ui-id-1"> 
     <img src="svg" class="attachment-full size-full" alt="" sizes="100vw"> 
    </a> 
    <a href="#tabs-2" role="presentation" tabindex="-1" class="iu-tabs-anchor" id="ui-id-2"> 
     <img src="svg" class="attachment-full size-full" alt="" sizes="100vw"> 
    </a> 
    <a href="#tabs-3" role="presentation" tabindex="-1" class="iu-tabs-anchor" id="ui-id-3"> 
     <img src="svg" class="attachment-full size-full" alt="" sizes="100vw"> 
    </a> 
    </div> 
</div> 

Und es ist die Javascript-I

verwenden

<script> 
    $(function() { 
    $("#cartes").tabs({ 
     create: function(e, ui) { 
     var bottomNav = $('<div class="ui-tabs-nav bottom"/>').appendTo(this); 
     $(this).find('.ui-tabs-nav a') 
      .clone() 
      .click(function() { 
       $("#cartes").tabs('select', $(this).index('id')); 
      }).appendTo(bottomNav); 
     } 
    }); 

    $("#cartes").tabs({ 
     show: 'fade', 
     hide: 'fade' 
    }); 
    }); 
</script> 

Kann mir jemand helfen? Prost

David

Answer 1

ich eine funktionierende Lösung gefunden, und ich REMPLACE die Javascript dieses neue:

$(function() { 
    $("#cartes").tabs({ 
     activate: function (e, ui) { 
      var num = ui.newTab.index() 
      console.log(num) 
      $("li",clone).removeClass("ui-tabs-active ui-state-active").eq(num).addClass("ui-tabs-active ui-state-active") 

     } 
    }) 
    var clone = $("#cartes ul").clone(true).addClass("ui-nav-bottom").appendTo("#cartes") 
    $("li", clone).each(function (num) { 
     $(this).click(function() { 
      console.log(num) 
      $("#cartes").tabs("option", "active", num) 
     }) 
    }) 

}); 

und arbeitet jetzt ist es wie ein Zauber :)

Prost David