Как изменить текст заголовка, когда была активна вкладка bootstarp?

Question

У меня есть вкладка начальной загрузки и заголовок для моей страницы, и я хочу изменить заголовок страницы, нажав на вкладку, но мой код jquery не работает правильно.

$(document.body).on('click', '.chooseChangePass li a', function(e) {
  if ($("#chPass").hasClass("active")) {
    $("#TitlePage").html("change Password");
  } else {
    $("#TitlePage").html("change UserName");
  }
  
  if ($("#chUserName").hasClass("active")) {
    $("#TitlePage").html("change UserName");
  } else {
    $("#TitlePage").html("change Password ");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="TitlePage">change password</h1>
<ul class="chooseChangePass">
  <li class="active" id="chPass"><a href="#changePassword" data-toggle="tab">change password</a></li>
  <li id="chUserName"><a href="#changeUserName" data-toggle="tab">change UserName</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade" id="changeUserName">
    changeUserName
  </div>
  <div role="tabpanel" class="tab-pane fade in active" id="changePassword">
    changePassword
  </div>
</div>

Answer 1

Вам не хватает кода, который переключает active класс.Добавьте файл bootstrap.min.js.Кроме того, операторы else в вашем коде являются избыточными.

Правильный способ изменения заголовка страницы после изменения табуляции - использовать События начальной загрузки .Вам необходимо прослушать событие shown.bs.tab.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('#page-title').html(e.target.text);
});

Вот рабочий пример с Bootstrap 4.1.3: https://codepen.io/anon/pen/OrJOQE?editors=1010

Обязательно посмотрите документацию по используемой версии Boostrap, так как между версиями 3 и 4 произошли существенные изменения.И измените селектор вкладок на именованный, если вы планируете иметь больше групп вкладок на одной странице.