jQuery选项卡导航-禁用第一个和最后一个箭头

<div class="tab-navigation">
  <button class="arrow left disabled"></button>
  <ul class="tabs">
    <li class="tab">Tab 1</li>
    <li class="tab">Tab 2</li>
    <li class="tab">Tab 3</li>
    ...
  </ul>
  <button class="arrow right"></button>
</div>

$(document).ready(function() {
  // 获取箭头按钮和选项卡元素
  var $leftArrow = $('.arrow.left');
  var $rightArrow = $('.arrow.right');
  var $tabs = $('.tab');

  // 禁用第一个箭头
  $leftArrow.addClass('disabled');

  // 点击箭头按钮时切换选项卡
  $leftArrow.click(function() {
    // 切换到前一个选项卡
    var currentIndex = $tabs.index($('.active'));
    $tabs.eq(currentIndex - 1).click();
  });

  $rightArrow.click(function() {
    // 切换到下一个选项卡
    var currentIndex = $tabs.index($('.active'));
    $tabs.eq(currentIndex + 1).click();
  });

  // 点击选项卡时更新箭头按钮的状态
  $tabs.click(function() {
    var currentIndex = $tabs.index($(this));
    // 更新箭头按钮的禁用状态
    $leftArrow.toggleClass('disabled', currentIndex === 0);
    $rightArrow.toggleClass('disabled', currentIndex === $tabs.length - 1);
  });
});

.arrow.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}