jQuery ULタブ重複ナビゲーション - 問題？

Question

私はJquery Tabs Navigationを複製しようとしていましたが、この同じWebサイトで投稿を見つけました。ここで

が話題です： TOPIC

私が@Didier Ghysの手順に従ってくださいフィドル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ですが、私はそれが完全に動作させることはできません。

私のタブは重複していますが、クリックするとエラーが発生し、何も起こりません。私はこのためにwordpressとAFCで働いています。

<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> 

そして私は誰も私を助けることができる

<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> 

を使用するJavaScriptがあります。ここでは

は、私は今のところ何を得るのですか？乾杯

デビッド

Answer 1

私は実用的なソリューションを見つけて、私はこの新しいものでJavascriptをremplace：

$(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) 
     }) 
    }) 

}); 

そして今、それが魅力のように働いています:)

乾杯 デビッド

を