首页 文章

如何在tab bootstarp处于活动状态时更改 Headers 文本？

提问于
浏览 次
0

我有一个tab bootstarp和我的页面的 Headers ，我想更改页面的 Headers ，点击选项卡是活动的，但我的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>
javascript jquery twitter-bootstrap css3

1 回答

  • 1

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

    更改选项卡后更改页面 Headers 的正确方法是使用Bootstrap navs events . 你需要听 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之间存在重大更改 . 如果您计划在同一页面上有更多选项卡组，请将选项卡选择器更改为命名选项卡 .

    回复于

相关问题