选项卡引导激活时，如何更改标题文本？

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);
});

下面是引导4.1.3的工作示例：https://codepen.io/anon/pen/OrJOQE?editors=1010

请确保查找您正在使用的Boostrap版本的文档，因为在版本3和4之间有显着的更改。如果您计划在同一页上有更多的选项卡组，则请将选项卡选择器更改为指定的选项卡选择器。