Запомните последнюю вкладку после перенаправления

Question

У меня есть сложный вид на Laravel с множеством вкладок и форм, пользователь может перемещаться по вкладкам и выполнять различные формы на каждой вкладке после отправки контроллеров с одного и того же представления с помощью текущая переменная вкладка, выглядит следующим образом:

...Controller actions... 

return view("store.tesla.user.components") 
       ->with('tab', '3'); 

каждой вкладка получила идентификатор так что, когда я возвращаюсь к моему мнению, я просто искать активную вкладку и поместить активным с JQuery, как это:

var tb_active = <?php echo $tab; ?> 
$('#'+tb_active).addClass('active'); 

На самом деле это работает, но я чувствую, что я смешиваю PHP + JS специально с использованием Laravel framework и d выглядит не так хорошо, поэтому есть мои вопросы/вопросы:

Есть ли другой способ сделать это лучше или проще?

мой взгляд экстремально большой и у меня есть много классов CSS, если я скопировать мой код там будет грязно, так что я вилке codepen с закладками бутстраповских для лучшего показывать :)

https://codepen.io/Troyer/pen/MbGQPJ

HTML

<div class="container"><h1>Bootstrap tab panel example (using nav-pills) </h1></div> 
<div id="exTab1" class="container"> 
<ul class="nav nav-pills"> 
      <li class="active"> 
     <a href="#1a" data-toggle="tab">Overview</a> 
      </li> 
      <li><a href="#2a" data-toggle="tab">Using nav-pills</a> 
      </li> 
      <li><a href="#3a" data-toggle="tab">Applying clearfix</a> 
      </li> 
     <li><a href="#4a" data-toggle="tab">Background color</a> 
      </li> 
     </ul> 

      <div class="tab-content clearfix"> 
       <div class="tab-pane active" id="1a"> 
      <h3>Content's background color is the same for the tab</h3> 
       </div> 
       <div class="tab-pane" id="2a"> 
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3> 
       </div> 
     <div class="tab-pane" id="3a"> 
      <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3> 
       </div> 
      <div class="tab-pane" id="4a"> 
      <h3>We use css to change the background color of the content to be equal to the tab</h3> 
       </div> 
      </div> 
    </div> 


<!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

CSS

body { 
    padding : 10px ; 

} 

#exTab1 .tab-content { 
    color : white; 
    background-color: #428bca; 
    padding : 5px 15px; 
} 

#exTab2 h3 { 
    color : white; 
    background-color: #428bca; 
    padding : 5px 15px; 
} 

/* remove border radius for the tab */ 

#exTab1 .nav-pills > li > a { 
    border-radius: 0; 
} 

/* change border radius for the tab , apply corners on top*/ 

#exTab3 .nav-pills > li > a { 
    border-radius: 4px 4px 0 0 ; 
} 

#exTab3 .tab-content { 
    color : white; 
    background-color: #428bca; 
    padding : 5px 15px; 
} 

Благодарим за ваше время.

Answer 1

Вы пробовали скрытые поля. Вы можете установить эту вкладку активной посредством чтения, что скрытые значения, как:

$(".selector").tabs({ active: $('#your-hidden-fiel').val() }); 

Смотрите на full example.

Answer 2

создать массив в JS ниже Вашей секции контента

var pagedefaults = { 
     activetab: "{{ $activetab }}", 
}; 

Здесь $activetab приходит от контроллера. Теперь вы можете использовать активное значение вкладки, например pagedefaults.activetab, в своем javascript и активировать вкладку. Это также можно использовать для локализации и маршрутов Ajax.