0

Есть нестандартные табы для bootstrap, написанные для версии 3:

$(document).ready(function() {

  var tab = $('#myTab');
  var num = tab.find('.nav-tabs li').length - 1;

  $('.next').click(function() {
    var cur = tab.find('li.active');
    var index = cur.index();

    if (index == num) {
      var next = tab.find('.nav-tabs').find('li').eq(0);
    } else {
      var next = cur.next('li');
    }

    next.find('a').tab('show');
  });

  $('.prev').click(function() {
    var cur = tab.find('li.active');
    var index = cur.index();

    if (index == 0) {
      var next = tab.find('.nav-tabs').find('li').eq(num);
    } else {
      var next = cur.prev('li');
    }

    next.find('a').tab('show');
  });

});
.controls {
  margin: 20px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div role="tabpanel" id="myTab">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim.
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
      laoreet.
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam
      quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
    </div>
  </div>

</div>

<div class="controls">
  <a href="#" class="btn btn-default prev">
    < Prev</a>
      <a href="#" class="btn btn-default next">Next ></a>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

На версии Bootstrap 4 они (неожиданно) не работают. Т.е. табы по клику на них переключаются, а вот стрелки переключают табы только с первый на второй таб и всё.

Вот как они (не)работают, если подключить 4 Bootstrap:

$(document).ready(function(){
   
    var tab = $('#myTab');
    var num = tab.find('.nav-tabs li').length - 1;
    
    $('.next').click(function(){
        var cur = tab.find('li.active');
        var index = cur.index();
        
        if(index == num) {
            var next = tab.find('.nav-tabs').find('li').eq(0);
        }
        else {
           var next = cur.next('li'); 
        }
        
        next.find('a').tab('show');
    });
    
    $('.prev').click(function(){
        var cur = tab.find('li.active');
        var index = cur.index();
        
        if(index == 0) {
            var next = tab.find('.nav-tabs').find('li').eq(num);
        }
        else {
           var next = cur.prev('li'); 
        }
        
        next.find('a').tab('show');
    });
    
});
.controls {
    margin: 20px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div role="tabpanel" id="myTab">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim.
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
      laoreet.
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam
      quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
    </div>
  </div>

</div>

<div class="controls">
  <a href="#" class="btn btn-default prev">
    < Prev</a>
      <a href="#" class="btn btn-default next">Next ></a>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Подскажите, пожалуйста, где несовместимость и что нужно переписать? Заранее огромное спасибо!

3
  • Проверьте их еще раз, тут все работает
    – RavenTheX
    26 июн 2020 в 9:22
  • Так подключите четвертый, как вы хотите что бы вам помогли если нельзя воспроизвести проблему
    – RavenTheX
    26 июн 2020 в 9:25
  • 1
    @RavenTheX, Да, надо было, извиняюсь, подключил ниже на 4.
    – prampampam
    26 июн 2020 в 9:29

1 ответ 1

0

Сам разобрался. Вот код табов со стрелками для Bootstrap 4, может кому-то понадобится:

$(function () {
    var tab = $('#nav-tab');
    var num = tab.find('a.nav-item').length - 1;

    $('.next').click(function () {
        var cur = tab.find('a.active');
        var index = cur.index();

        if (index == num) {
            var next = tab.find('a.nav-item').eq(0);
        } else {
            var next = cur.next('a.nav-item');
        }

        (next).tab('show');
    });

    $('.prev').click(function () {
        var cur = tab.find('a.active');
        var index = cur.index();

        if (index == 0) {
            var next = tab.find('a.nav-item').eq(num);
        } else {
            var next = cur.prev('a.nav-item');
        }

        (next).tab('show');
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</div>
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</div>
    </div>

    <div class="controls">
        <a href="#" class="btn btn-default prev">
            < Prev</a>
                <a href="#" class="btn btn-default next">Next ></a>
    </div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.