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

Question

我无法隐藏和显示第一页或最后一页上的下一个和上一个按钮。我已经研究了不同的方法，但是还没有使用最新的库来使用它们。

是否可以使用第一种和最后一种方法来执行此操作？

很快就会接受提示！

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要检查每个替换标签上的active。

所以，我将检查移到了单独的函数（resetButtons）并在开始时运行它，并在每次单击后运行。

另外。我完成了检查 - 你错过了检查用户是否在最后一个标签中。

<强>更新

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;