如何根据从按钮单击中选择的值将选项卡设置为活动

Question

我需要根据单击按钮时选择的值将选项卡设置为活动的。

找到下面的代码：

<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的网页称为中小企业托管，它的工作正常，但当我点击从索引页面的链接，我需要设置在中小企业托管页面的标签为活动的基础上点击链接。

帮助我根据按钮中的值将选项卡设置为活动状态。

Answer 1

你可以在你的控制器函数中设置一个闪存会话变量，在点击按钮后打开你的第二页。

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'，'')将返回active。

如果你在同一个页面上，你可以使用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
  }
 });