前言

bootstrap的tab标签有自带的样式，有些它自定义的class的一些属性比较的多，当我们用自定义样式去覆盖时往往会产生一些问题。

一、切换效果的更改

由于我按照官网给的模板更改时，tab的标签样式更改的不是很明显，于是我想用自定义去更改。

当我点击“上传图片时”，想让它变成蓝底白字以便区分另外一个，表示当前选中的状态。
tab标签的代码：

     <ul class="mb-3 navbar-nav ml-auto align-items-lg-center nav nav-pills nav-fill" role="tablist" id="myTab">
            <h6 class="dropdown-header font-weight-600 d-lg-none px-0">Menu</h6>
            <li class="nav-item ">
              <a class="btn btn-sm bg-white  d-lg-inline-flex" id="up-tab" data-toggle="tab" href="#up" role="tab" aria-controls="up" aria-selected="true">上传图片</a>
            </li>
            <li class="nav-item ">
              <a class="btn btn-sm bg-white  d-lg-inline-flex" id="pic-tab" data-toggle="tab" href="#pic" role="tab" aria-controls="contact" aria-selected="false">我的图片</a>
            </li>
          </ul>

由于很多的class名，bootstrap对其进行了处理，所以不了解哪一个类名是做啥的确实有点麻烦。

二、更改样式

首先自定义CSS样式：

      /* 确保选择器具有高优先级 */
      #myTab a.btn {
        background-color: #fff !important; /* 白色背景 */
        color: #007bff !important; /* 蓝色文字 */
      }

      #myTab a.btn-active {
        background-color: #007bff !important; /* 蓝色背景 */
        color: #fff !important; /* 白色文字 */
      }

之前用的 .类名 来表示一直不行，可能优先度不行。
用了Jquery的监听：

    <script>
      $(document).ready(function () {
        $('#myTab a').on('click', function (e) {
          e.preventDefault(); // 阻止默认行为
          $(this).tab('show'); // 显示点击的标签页

          // 移除所有按钮的激活样式
          $('#myTab a').removeClass('btn-active');
          // 将点击的按钮添加激活样式
          $(this).addClass('btn-active');
        });
      });
    </script>

这里注意，要放在所有引用后，不然没用。


效果就是我点击它展现当前的tab内容，然后蓝色表示当前选中。

三、总结

要覆盖掉原有的样式，首先要确保优先级高于它自带的属性，然后自定义js要放在导入所有js最后执行。