Question

下面我提到了我的HTM代码。通过单击“next-nav”，它必须检查“活动”ID并移动到下一个ID。与单击“priview-nav”相同，它已移至上一个ID

// HTML代码

<div class="tab-content">
    <span class="priview-nav"></span>  // previous button
    <span class="next-nav"></span>  // next button
    <div role="tabpanel" class="tab-pane active" id="page-1"></div>  // active ID
    <div role="tabpanel" class="tab-pane" id="page-3"></div>  // Next Id to load
    <div role="tabpanel" class="tab-pane" id="page-4"></div>  
    <div role="tabpanel" class="tab-pane" id="page-5"></div>  
    <div role="tabpanel" class="tab-pane" id="page-18"></div>

评论代码

$('.ss-help .next-nav').click(function() {
    $(".tab-pane").load($('#page-2')); 
    return false; 
});

Answer 1

从我所看到的

$('.ss-help .next-nav').click(function() {
    $(".tab-pane").load($('#page-2')); 
    return false; 
});

应该是

$('.tab-content').on('click', '.next-nav',function() {
    $(".tab-pane").load('some html or something'); 
    return false; 
});

问题限制了此响应的质量

Answer 2

因为我在你的帖子中没有看到AJAX，所以我假设你只想显示/隐藏元素。在这种情况下，我建议运行以下代码段，以便使用＆＃34; Next＆＃34;循环显示多个/。和＆＃34;以前＆＃34;的按钮。

（可以调整为在第一个或最后一个#([^\@]+)@([^\s]+)# ${2}/${1}/停止）

＆＃13;

tab-pane

＆＃13;

tab-pane

＆＃13;

$('.tab-content')
  .on('click', '.next', function (event) {
    var $curr = $('.tab-pane.active');
    var $next = $curr.next('.tab-pane');
    $curr.removeClass('active');
    if (!$next.length) {
      $next = $('.tab-pane:eq(0)'); // grab first tab-pane element
    }
    $next.addClass('active');
  })
  .on('click', '.previous', function (event) {
    var $curr = $('.tab-pane.active');
    var $prev = $curr.prev('.tab-pane');
    $curr.removeClass('active');
    console.log($prev);
    if (!$prev.length) {
      $prev = $('.tab-pane:last-child'); // grab last tab-pane element
    }
    $prev.addClass('active');
  });

＆＃13;

通过单击下一个jQuery方法异步加载下一页和上一页

2 个答案: