Смена вкладки при разных utm_term

Question

Выручайте пожалуйста... Есть три вкладки. По умолчанию активна первая. Как можно сделать, чтобы при определенной utm метке, были открыты разные вкладки. Например, если utm_term=tab3, чтобы активной была вкладка tab3. Кто разбирается подскажите пожалуйста. Буду очень признательным!

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab1">Вкладка 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab2">Вкладка 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab3">Вкладка 3</a>
    </li>
</ul>


<div class="tab-content">
    <div class="tab-pane show active" id="tab1">
        Контент вкладки 1
    </div>

    <div class="tab-pane" id="tab2">
        Контент вкладки 2      
    </div>

    <div class="tab-pane" id="tab3">      
        Контент вкладки 3      
    </div>            
</div>

Answer 1

Сначала гуглим как получить URL-параметр в js.

Затем гуглим Bootstrap Tabs

function getParameter(parameterName) {
  var result = null,
    tmp = [];
  location.search.substr(1).split("&").forEach(item => {
    tmp = item.split("=");
    if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
  });
  return result;
}

// const tabName = getParameter("utm_term");
const tabName = "tab2"; // Для теста
if (tabName) {
  $(`a[data-toggle='tab'][href^='#${tabName}']`).tab('show');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#tab1">Вкладка 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2">Вкладка 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab3">Вкладка 3</a>
  </li>
</ul>


<div class="tab-content">
  <div class="tab-pane show active" id="tab1">
    Контент вкладки 1
  </div>

  <div class="tab-pane" id="tab2">
    Контент вкладки 2
  </div>

  <div class="tab-pane" id="tab3">
    Контент вкладки 3
  </div>
</div>

БЛОГ НА HUSL

Смена вкладки при разных utm_term

Ответы (1 шт):