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';。

从另一个页面单击链接时，打开特定的选项卡

1 个答案: