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用于名为sme托管的页面，并且可以正常工作，但是当我单击索引页面中的链接时，我需要根据所单击的链接将sme托管页面中的选项卡设置为活动状态。

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

Answer 1

您可以在控制器功能中设置一个Flash会话变量，该变量将在单击按钮后打开第二页。

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
  }
 });

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

1 个答案: