引导导航选项卡的字体颜色在活动状态下没有变化

Posted

技术标签:

【中文标题】引导导航选项卡的字体颜色在活动状态下没有变化【英文标题】:Font color of bootstrap nav-tabs not changing in active state 【发布时间】:2021-05-20 00:32:27 【问题描述】:

我正在尝试在单击时更改引导导航选项卡的字体颜色。 我可以使用 css .nav-tabs>li>a 将未选择的导航选项卡的字体颜色更改为绿色,但是 css 块 nav-tabs>li.active>a 似乎无法更改所选选项卡的颜色。请帮忙。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <style>
  .nav-tabs>li>a
  color:green;
  
  .nav-tabs>li.active>a
  color:green;
  
  </style>
</head>
<body>
 <ul class="nav nav-tabs">
  <li class="nav-item">
   <a class="nav-link active"
      href="#id1"
      data-toggle="tab">one</a>
  </li>
  <li class="nav-item">
   <a href="#id2"
      class="nav-link"
      data-toggle="tab">two</a>
  </li>
 </ul>
</body>

【问题讨论】:

【参考方案1】:

要为活动状态着色,您必须覆盖引导样式,如下所示:.nav-tabs a.nav-link.active

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <style>
  .nav-tabs>li>a
  color:green;
  
  .nav-tabs a.nav-link.active 
    color: red;
  
  </style>
<body>
 <ul class="nav nav-tabs">
  <li class="nav-item">
   <a class="nav-link active"
      href="#id1"
      data-toggle="tab">one</a>
  </li>
  <li class="nav-item">
   <a href="#id2"
      class="nav-link"
      data-toggle="tab">two</a>
  </li>
 </ul>

【讨论】:

【参考方案2】:

改为

.nav-tabs>li.active>a
     color:green;

您可以使用以下代码更改所选标签的颜色

.nav-tabs .nav-link.active
    color:red; /*color you want*/

【讨论】:

【参考方案3】:

您的选择器不正确。 .active 类在锚标记中。你已经给li

改变

.nav-tabs>li.active>a
  color:green;
  

.nav-tabs > li > a.active 
  color:green;

【讨论】:

非常感谢大家。帮助加快了我的家庭作业

以上是关于引导导航选项卡的字体颜色在活动状态下没有变化的主要内容,如果未能解决你的问题,请参考以下文章

选项卡的android字体大小

vue为啥一打勾字体整体变色

微信顶部导航栏字体颜色

linux下字体颜色变化

Uniapp 动态修改状态栏导航栏背景色字体颜色插件 Ba-AppBar

Uniapp 动态修改状态栏导航栏背景色字体颜色插件 Ba-AppBar