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

Posted 2023-05-08

【中文标题】选项卡，在第一个选项卡上隐藏上一个，在最后一个选项卡上隐藏下一个

【英文标题】：Tabs, Hide Previous on first tab and next on last

【发布时间】：2017-05-06 16:57:42

【问题描述】：

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

是否可以使用 first 和 last 方法来做到这一点？

我们很乐意接受提示！

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

【参考方案1】：

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

因此，我将检查移至单独的函数 (resetButtons) 并在开始时运行它，并在每次单击后运行它。

还有。我完成了检查 - 如果用户在最后一个选项卡中，您错过了检查。

更新

您不需要手动调用该函数，只需将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>