Следующая Предыдущая Вкладки Bootstrap - PullRequest
Новая
       17

Следующая Предыдущая Вкладки Bootstrap

0 голосов
/ 19 марта 2019

У меня есть две общие кнопки «СЛЕДУЮЩАЯ» и «ПРЕДЫДУЩАЯ» при нажатии на соответствующую кнопку. У меня есть создать следующий код для этого. Мой код

Моя проблема в том, что я хочу показать предыдущую кнопку при нажатии кнопки «СЛЕДУЮЩАЯ», но хочу скрыть активную первую вкладку и наоборот. Пожалуйста, помогите. 

jQuery('#ntxbtn').click(function(e){
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').next('li').find('a');
    jQuery('#prevbtn').show();
    if(next_tab.length>0){
      next_tab.trigger('click');
    }else if(next_tab.length>0){
      jQuery('#ntxbtn').hide();
    }
  });
  jQuery('#prevbtn').click(function(e){
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').prev('li').find('a');
    if(next_tab.length>0){
      next_tab.trigger('click');
    }else {
      jQuery('#prevbtn').hide();
    }
  });

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Это может быть работа: 

jQuery('#ntxbtn').click(function (e) {
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').next('li').find('a');
    jQuery('#prevbtn').show();
    if (next_tab.length > 0) {
        next_tab.trigger('click');
    }
    checkNavButtons();
});
jQuery('#prevbtn').click(function (e) {
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').prev('li').find('a');
    if (next_tab.length > 0) {
        next_tab.trigger('click');
    }
    checkNavButtons();
});


function checkNavButtons() {
    var activeButton = jQuery('.nav-tabs > .active');
    var nextNav = activeButton.next('li').find('a');
    var prevNav = activeButton.prev('li').find('a');

    if (nextNav.length) {
        jQuery('#ntxbtn').show();
    } else {
        jQuery('#ntxbtn').hide();
    }

    if (prevNav.length) {
        jQuery('#prevbtn').show();
    } else {
        jQuery('#prevbtn').hide();
    }
}

См. Скрипку: https://jsfiddle.net/rp2w4Ljq/3/

1 голос
/ 19 марта 2019

Я обновил ваш код для правильной работы.Только код JS обновлен.

Пожалуйста, проверьте демонстрационную ссылку . 

var totalTabs = $('.nav-tabs li').length;
var currentTab = 1;

$('#ntxbtn').click(function(e){
    e.preventDefault();
    currentTab +=1;
    showHideControls();
    var next_tab = $('.nav-tabs > .active').next('li').find('a');
    if(next_tab.length > 0){
      next_tab.trigger('click');
    }
  });
  $('#prevbtn').click(function(e){
    e.preventDefault();
    currentTab -=1;
    showHideControls();
    var prev_tab = $('.nav-tabs > .active').prev('li').find('a');
    if(prev_tab.length > 0){
      prev_tab.trigger('click');
    }
});

function showHideControls(){

  if(currentTab == 1){
    $('#prevbtn').hide();
  } else if(currentTab == totalTabs){
		$('#ntxbtn').hide();
  } else {
    $('#prevbtn').show();
    $('#ntxbtn').show();
  }

}
.nav-tabs li a{
  display:inline-block;
  padding:5px;
  border:1px solid #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane  in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

<a href="#" type="button" class="btn btn-primary" id="prevbtn" style="display:none;"></i> Previous</a>
                                <a href="#" type="button" class="btn btn-primary" id="ntxbtn"> Next</a>
...