Question

我想为 JS 标签添加下一个/上一个按钮，以便用户可以使用这些按钮转到下一个标签。此外，我希望只有当第二个标签打开时，前一个按钮才会出现，而当打开最后一个标签时，下一个按钮会消失。我怎么能这样做？

＆＃13;

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
});

＆＃13;

    #tab-1 {
      display: block;
    }
    .tab-content {
      display: none;
      overflow: hidden;
    }

＆＃13;

 <ul class="tabs-menu" class="articles">
  <li class="current"><a href="#tab-1">tab 1</a>
  </li>
  <li><a href="#tab-2">tab 2</a>
  </li>
  <li><a href="#tab-3">tab 3</a>
  </li>
  <li><a href="#tab-4">tab 4</a>
  </li>
</ul>
<div class="tab">
  <div id="tab-1" class="tab-content">Content 1</div>
  <div id="tab-2" class="tab-content">Content 2</div>
  <div id="tab-3" class="tab-content">Content 3</div>
  <div id="tab-4" class="tab-content">Content 4</div>
</div>

＆＃13;

Answer 1

我们已经为您的代码尝试了下一个上一个按钮查看此jsfiddle链接

$('#nex').on('click',function(){
     if(count<4)
        {
    $('.tab-content').hide()
    count++;
    $('#tab-'+count).show();
    if(count>1)
        $('#pre').show();
    else
        $('#pre').hide();
        }
});

    $('#pre').on('click',function(){
        if(count>1)
        {
    $('.tab-content').hide()
    count--;
    $('#tab-'+count).show();
    if(count<4)
        $('#nex').show();
    else
        $('#nex').hide();
        }
});

如何为JS选项卡添加下一个/上一个按钮

1 个答案: