jQuery ul选项卡复制导航 - 问题

Question

我想克隆jQuery选项卡导航，我在同一网站中找到了帖子。

这是主题：主题

我遵循@didier Ghys的步骤，

$( "#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> 

和我使用的javascript

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

有人可以帮我吗？欢呼

大卫

Answer 1

我找到了一个有效的解决方案，我通过这个新的解决方案来重新安置JavaScript：

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

现在它像魅力一样工作：）

欢呼大卫