Хобрук: Ваш путь к мастерству в программировании

Вкладки Bootstrap: кнопки «Далее» и «Назад» для форм

Я пытаюсь (в конечном итоге) разделить форму на несколько вкладок Bootstrap 3.x, но у меня возникают проблемы с кнопками «предыдущая» и «следующая». Функционирует только первая следующая кнопка, а иногда содержимое вкладки вообще не меняется между вкладками, когда вкладки нажимаются вручную ИЛИ с помощью кнопок.

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary" id="btnNext">Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnNext">Next</a>
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary" id="btnPrevious">Previous</a>
    </div>
</div>
<script>
  $('#btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('#btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
javascript jquery tabs twitter-bootstrap twitter-bootstrap-3
10.03.2014

  • Вы не можете использовать один и тот же идентификатор для нескольких кнопок/тегов. Попробуйте изменить идентификаторы кнопок с уникальными идентификаторами. 10.03.2014

Ответы:


1

Любой, кто хочет выполнить следующие предыдущие операции на вкладке, выполните следующие действия:

а) Поместите кнопки «Следующая предыдущая» на каждую панель вкладок

б) Привяжите нажатия кнопок к телу, чтобы оно вызывалось при нажатии

c) При щелчке вызывается нажатие следующей/предыдущей вкладки

г) Если это последняя вкладка, перенаправляйте пользователя на соответствующую вкладку (вызов показывает события первой или последней вкладки)

/**** JQuery *******/
jQuery('body').on('click','.next-tab', function(){
      var next = jQuery('.nav-tabs > .active').next('li');
      if(next.length){
        next.find('a').trigger('click');
      }else{
        jQuery('#myTabs a:first').tab('show');
      }
});

jQuery('body').on('click','.previous-tab', function(){
      var prev = jQuery('.nav-tabs > .active').prev('li')
      if(prev.length){
        prev.find('a').trigger('click');
      }else{
        jQuery('#myTabs a:last').tab('show');
      }
});
/******* CSS *********/
.previous-tab,
.next-tab{
	display: inline-block;
	border: 1px solid #444348;
	border-radius: 3px;
	margin: 5px;
	color: #444348;
	font-size: 14px;
	padding: 10px 15px;
	cursor: pointer;
}
<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" id="myTabs" role="tablist">
    <li role="presentation" class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab">Step1</a></li>
    <li role="presentation"><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Step2</a></li>
</ul>
<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="step1">
    <p>tab1 content</p>
		<p>//Include next prev buttons in the tab-content</p>
		<span class="previous-tab">previous</span>
		<span class="next-tab">next</span>
    </div>
    <div role="tabpanel" class="tab-pane" id="step2">
		<p>tab2 content</p>
    <p>//Include next prev buttons in the tab-content</p>
		<span class="previous-tab">previous</span>
		<span class="next-tab">next</span>
	</div>
</div>

19.08.2019
  • К вашему сведению, вместо .trigger('click') можно сделать .tab('show'). 19.06.2020

    • 2

    Прежде всего: ID ДОЛЖЕН БЫТЬ УНИКАЛЬНЫМ

    Вот ваш рабочий код: http://www.bootply.com/120472

    HTML:

    <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

    JS:

     $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

    Фрагмент:

     $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

    10.03.2014
  • у вас есть какая-либо ссылка на документацию для него. 14.09.2016
  • Какую документацию вы хотите? Код просто говорит, что вы запускаете простой щелчок на вкладке до или после активного... 15.09.2016
  • Такой маленький и аккуратный... Отлично! 28.09.2016
  • Работает идеально для меня! 05.07.2017
  • У меня не работает следующее и предыдущее нажатие кнопки @BENARD Патрик 22.08.2020
  • @SafeerMP Пожалуйста, поделитесь своей конфигурацией, браузером и ОС, пожалуйста. с этой информацией лучше отлаживать... 25.08.2020
  • @BENARDPatrick Спасибо за ваш ответ. Проблема решена. Проблема была с загрузочной версией 26.08.2020

    • 3

    Для начальной загрузки 4

    <button class="btn btn-info btn-lg previous">Previous</button>
<button class="btn btn-info btn-lg next">Next</button>


$('.next').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});

$('.previous').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});
    06.11.2018
  • Большое спасибо! 28.07.2020
    • Новые материалы
    Dall-E 2: недавние исследования показывают недостатки в искусстве, созданном искусственным интеллектом
    DALL-E 2 — это всеобщее внимание в индустрии искусственного интеллекта. Люди в списке ожидания пытаются заполучить продукт. Что это означает для развития креативной индустрии? О применении ИИ в..
    «Очень простой» эволюционный подход к обучению с подкреплением
    В прошлом семестре я посетил лекцию по обучению с подкреплением (RL) в моем университете. Честно говоря, я присоединился к нему официально, но я редко ходил на лекции, потому что в целом я нахожу..
    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..
    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..
    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..