选项卡bootstarp处于活动状态时如何更改标题文本？

Question

I have a tab bootstarp and a title for my page and I want to change the title of page with click on tab is active but my jquery code donot work correctly.

 $(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

You are missing code, that toggles active class. Add bootstrap.min.js file. Also, else statements in your code are redundant.

Correct way of changing page title after tab changes is to use Bootstrap navs events . You need to listen for shown.bs.tab event.

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

Here's working example with Bootstrap 4.1.3: https://codepen.io/anon/pen/OrJOQE?editors=1010

Be sure to lookup documentation for Boostrap version that you are using, as there were significant changes between version 3 and 4. And change tab selector to named one, if you are planning to have more tab groups on same page.