从其他页面单击链接时打开特定选项卡

Question

美好的一天，我需要帮助，

当在另一个页面上单击链接时，我需要在页面加载后显示该选项卡，我已经看到这是使用散列#id完成的，但有没有任何可能的方法来使用数据过滤器，因为它们是控制标签的人？

   <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <ul class="nav nav-pills" id="filters">
            <li class="active"><a href="#" data-filter="*">All</a></li>
            <li><a href="#" data-filter=".Tab1">Tab1</a></li>
            <li><a href="#" data-filter=".Tab2">Tab2</a></li>
             <li><a href="#" data-filter=".Tab3">Tab3</a></li>
          </ul>
        </div>
      </div>
    </div>

Answer 1

您可以在查询字符串中传递特殊请求参数。 然后获取参数值并激活相应的选项卡。

例如，将tab-name添加到目标URL的查询字符串中（完整的相对URL是/my-page?tab-name=profile ）。 以下表达式返回参数的值，该值等于'profile' ：

var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];

如果省略tab-name则表达式返回空字符串。

然后按接收的值选择导航选项卡，并使用show方法激活其关联的窗格。

 var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1]; tabName='profile'; // remove this line on real page if(tabName.length) $('#myTabs .nav-link[href="#' + tabName + '"]').tab('show'); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <ul class="nav nav-pills" id="myTabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> 

请注意，在代码段中我直接设置tabName值，因为无法将自定义请求发送到代码段。 所以，你必须删除tabName='profile'; 在你的真实页面上。