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

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

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

例如，在目标URL的查询字符串中加入tab-name(完整的相对URL为/my-page?tab-name=profile)。以下表达式返回参数值，等于 'profile':

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

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

然后通过接收到的值选择导航选项卡并使用 show 激活其关联的 Pane 方法。

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