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

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），然后在开始和每次点击之后运行它。

也是如此。我完成了检查 - 您错过了检查用户是否在最后一个选项卡中。

update

您无需手动调用该功能，只需将resetButtons函数传递为activate和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>