选项卡，在第一个选项卡上隐藏上一个，在最后一个选项卡上隐藏下一个

Question

我无法在第一页或最后一页上隐藏和显示下一个和上一个按钮。我研究了不同的方法，但到目前为止还没有任何方法可以使用最新的库。

是否可以使用第一个和最后一个方法来做到这一点？

我们很乐意接受提示！

$(document).ready(function() {
  $("#tabs").tabs();

  $(".btnNext").click(function() {
    var active = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", active + 1);
  });


  $(".btnPrev").click(function() {
    var active = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", active - 1);
  });

  var active = $("#tabs").tabs("option", "active");
  if (active == 0) {
    $(".btnPrev").hide();
  } else {
    $(".btnPrev").show();
  };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<div id="tabs">
  <ul>
    <li><a href="#fragment-1" class="firstTab"><span>One</span></a>
    </li>
    <li><a href="#fragment-2"><span>Two</span></a>
    </li>
    <li><a href="#fragment-3" class="lastTab"><span>Three</span></a>
    </li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
<button class="btnPrev">Prev</button>
<button class="btnNext">Next</button>

Answer 1

您需要检查每个替换选项卡上的 active。

因此，我将检查移到单独的函数 (resetButtons) 和运行开始时，以及每次点击后。

还有。我完成了检查 - 你错过了最后一个选项卡中的用户检查。

更新

您不需要手动调用该函数，只需将 resetButtons 函数作为 activate and create 参数传递即可。在这种情况下，如果用户也单击选项卡（不仅是按钮），resetButtons 将运行

$(document).ready(function() {
  $("#tabs").tabs({
    activate: resetButtons,
    create: resetButtons
  });
  // resetButtons();
  
  $(".btnNext").click(function() {
    var active = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", active + 1);
    // resetButtons();
  });


  $(".btnPrev").click(function() {
    var active = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", active - 1);
    // resetButtons();
  });

});

function resetButtons() {
  var active = $("#tabs").tabs("option", "active");
  var tabsLength = $("#tabs li").length;
  if (active == 0) {
    $(".btnPrev").hide();
  } else {
    $(".btnPrev").show();
  };  
  
  if (active == (tabsLength - 1)) {
    $(".btnNext").hide();
  } else {
    $(".btnNext").show();
  };  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<div id="tabs">
  <ul>
    <li><a href="#fragment-1" class="firstTab"><span>One</span></a>
    </li>
    <li><a href="#fragment-2"><span>Two</span></a>
    </li>
    <li><a href="#fragment-3" class="lastTab"><span>Three</span></a>
    </li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
<button class="btnPrev">Prev</button>
<button class="btnNext">Next</button>

选项卡，在第一个选项卡上隐藏上一个，在最后一个选项卡上隐藏下一个

Tabs, Hide Previous on first tab and next on last

javascript

jquery

jquery-ui

jquery-ui-tabs