jQuery UL 选项卡重复导航 - 问题？

Question

我想克隆一个 Jquery Tabs Navigation，但我在同一个网站上发现了一篇文章。

这里是题目：TOPIC

我按照@Didier Ghys 的步骤使用 is Fiddle Example

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

});

现在它就像一个魅力:)

干杯 大卫