Как установить вкладку активной на основе значения, выбранного из нажатия кнопки - PullRequest
Новая
       7

Как установить вкладку активной на основе значения, выбранного из нажатия кнопки

0 голосов
/ 09 ноября 2018

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

Найдите код ниже: 

<a href="smeHosting#linuxHosting" class="btn btn-primary">Linux Shared hosting @ Rs.62 / mo</a>
<a  href="smeHosting#windowsHosting"  class="btn btn-primary">Windows Shared hosting @ Rs.62 / mo</a>

Найдите JS: 

  $(document).ready(function() {

$('ul.smeHostingTabsContainer li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.smeHostingTabsContainer li').removeClass('active');
    $('.tabContent').removeClass('active');
    $('.tabHostingFeatureContainer section').removeClass('active');

    $(this).addClass('active');
    $("#" + tab_id).addClass('active');
    $(".tabHostingFeatureContainer section#" + tab_id).addClass('active');

})

});

Я использовал вышеуказанные js для страницы, называемой sme hosting, и она работает правильно, но пока я щелкаю ссылку на странице индекса, мне нужно сделать вкладки на странице sme hosting активными на основе нажатой ссылки.

Помогите мне установить вкладки активными на основе значений кнопки.

1 Ответ

0 голосов
/ 09 ноября 2018

Вы можете установить переменную сеанса флэш-памяти в функции контроллера, которая открывает вторую страницу после нажатия кнопки. 

session()->flash('tabName', 'active');

Теперь на второй странице получаем переменную сеанса. 

<li class="nav-item">
  <a class="nav-link {{Session::get('tabName','')}}" data-toggle="tab" href="#tab" >Your Tab

   </a>
</li>

Session :: get ('tabName', '') вернется в активное состояние, если сеанс установлен в противном случае пустым.

И если вы находитесь на той же странице, вы можете использовать jquery, добавьте дополнительный класс к своим кнопкам 

<a href="smeHosting#linuxHosting" class="btnTab btn btn-primary">Linux Shared hosting @ Rs.62 / mo</a>
<a  href="smeHosting#windowsHosting"  class="btnTab btn btn-primary">Windows Shared hosting @ Rs.62 / mo</a>

Теперь в JQuery проверьте кнопку, какая кнопка нажата 

$('.btnTab').on('click', function (e) {

      var button= $(e.target).attr("href");

   if(button==="smeHosting#linuxHosting"){
       //do something its hosting button click
    }
 else{
  //its another button
  }
 });
...