Вкладки Dynamic Bootstrap Nav

Question

Я пытаюсь сохранить активное состояние вкладок NavStart Bootstrap и отправить их как скрытое поле в форме, чтобы я мог поддерживать активное состояние при следующей загрузке страницы.

Мои навигационные вкладки;

 <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation" index="1" class="active"><a href="#text-only" aria-controls="text-only" role="tab" data-toggle="tab">Text only</a></li> 
      <li role="presentation" index="2"><a href="#with-pic" aria-controls="with-pic" role="tab" data-toggle="tab">With Pic</a></li> 
      <li role="presentation" index="3"><a href="#gallery" aria-controls="gallery" role="tab" data-toggle="tab">Gallery</a></li> 
      <li role="presentation" index="4"><a href="#map-view" aria-controls="map-view" role="tab" data-toggle="tab" >Map View</a></li> 
     </ul> 

Моей навигационной вкладкой для содержания;

<div class="tab-content"> 
     <div role="tabpanel" class="tab-pane active" id="text-only"> 
     </div> 
     <div role="tabpanel" class="tab-pane" id="with-pic"> 
     </div> 
     <div role="tabpanel" class="tab-pane" id="gallery"> 
     </div> 
     <div role="tabpanel" class="tab-pane" id="map"> 
     </div> 
</div> 

Я хочу послать в активное состояние, как

<form action="" method="get" name="search_form"> 
    <input type="hidden" name="active_nav_tab" value=""> 
    <input type="hidden" name="active_nav_content" value=""> 
    <input type="submit" value="submit"> 
</form> 

Один логики с помощью поля ввода формы, чтобы получить активную вкладку с помощью Jquery, но что будет значение, которое я передам в поля формы. Я застрял. Будем очень благодарны за любую помощь

Answer 1

Вот что вам нужно сделать, чтобы получить выбранные «вкладки», которые вы хотите, а затем, когда читаете с php или когда-либо проверяете соответствие и устанавливаете активный элемент соответственно:

JQuery:

$(function() { 
     $('#myForm').submit(function() { 

      var active_nav_tab = $('ul.nav-tabs li.active').attr('index'); //get index 
      var active_nav_content = $('.tab-content .active').attr('id'); //get id 

      $('#myForm input[name=active_nav_tab]').val(active_nav_tab); 
      $('#myForm input[name=active_nav_content]').val(active_nav_content); 
     }); 
    }); 

Я просто добавил идентификатор в форму так:

<form action="" method="get" id="myForm" name="search_form"> 
     <input type="hidden" name="active_nav_tab" value=""> 
     <input type="hidden" name="active_nav_content" value=""> 
     <input type="submit" value="submit"> 
    </form> 

EDIT:

Затем «перезагрузка» активная вкладка вы могли бы сделать что-то вроде этого:

$(function() { 
     //reload the last "active" li 
     $('ul.nav-tabs li').each(function() { 
      var index = $(this).attr('index'); 

      //do your check 
      if (index == "the number you passed back earlier") { 
      } 
     }); 

     //reload the last "active" tabpanel 
     $('.tab-content > div').each(function() { 
      var id = $(this).attr('id'); 

      //do your check 
      if (id == "the id you passed back earlier") { 
      } 
     }); 
    }); 

Answer 2

Это лучшее решение для меня, работает над стандартным бутстраповскими нав вкладки

$(document).ready(function() { 
 
    /*disable non active tabs*/ 
 
    $('.nav li').not('.active').addClass('disabled'); 
 
    $('.nav li').not('.active').find('a').removeAttr("data-toggle"); \t \t 
 
    $('#next').click(function(){ 
 
    /*enable next tab*/ 
 
    $('.nav li.active').next('li').removeClass('disabled'); 
 
    $('.nav li.active').next('li').find('a').attr("data-toggle","tab") 
 
    $('.nav li.active').next('li').find('a').tab('show') 
 
    $('.nav li').not('.active').addClass('disabled'); 
 
    $('.nav li').not('.active').find('a').removeAttr("data-toggle"); \t \t \t 
 
    }); \t \t 
 
    $('#prev').click(function(){ 
 
    /*enable prev tab*/ 
 
    $('.nav li.active').prev('li').removeClass('disabled'); 
 
    $('.nav li.active').prev('li').find('a').attr("data-toggle","tab") 
 
    $('.nav li.active').prev('li').find('a').tab('show') 
 
    $('.nav li').not('.active').addClass('disabled'); 
 
    $('.nav li').not('.active').find('a').removeAttr("data-toggle"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div> 
 
    <!-- 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">Home Content</div> 
 
    <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div> 
 
    <div role="tabpanel" class="tab-pane" id="messages">Messages Content</div> 
 
    <div role="tabpanel" class="tab-pane" id="settings">Settings Content</div> 
 
    </div> 
 
<button id="prev">Previus</button> 
 
<button id="next">Next</button> 
 
</div>