时间戳

首页 > 解决方案 > 当Tab Bootstarp处于活动状态时，如何更改标题的文本？

javascript - 当Tab Bootstarp处于活动状态时，如何更改标题的文本？

问题描述

我有一个选项卡 bootstarp 和我的页面的标题，我想通过单击选项卡来更改页面的标题处于活动状态，但我的 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>

标签： javascriptjquerytwitter-bootstrapcss

解决方案

您缺少用于切换active类的代码。添加 bootstrap.min.js 文件。此外，else您的代码中的语句是多余的。

更改选项卡后更改页​​面标题的正确方法是使用Bootstrap 导航事件。你需要监听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 之间发生了重大变化。如果您计划在同一页面上有更多选项卡组，请将选项卡选择器更改为命名的选项卡。

推荐阅读