Открывать определенную вкладку при переходе по ссылке с другой страницы

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'; на вашей реальной странице.