Question

我想要克隆一个Jquery Tabs Navigation，我在同一个网站上发现了一个帖子。

以下是主题：TOPIC

我遵循@Didier Ghys与Fiddle 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>

我使用的是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)
        })
    })

});

现在它的工作就像一个魅力：）

干杯大卫

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

1 个答案: