在引导程序中更改活动类的颜色

Posted 2023-02-21

【中文标题】在引导程序中更改活动类的颜色

【英文标题】：change the color of class active in bootstrap

【发布时间】：2015-10-02 12:15:03

【问题描述】：

我正在尝试更改我的 html 代码中活动类的颜色。我正在创建导航侧边栏。这是我的代码：

<div class="col-sm-2">
                <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked untuk jadi vertical -->
                    <li class="active"><a>Create Case</a></li>
                    <li><a href="wf-listofcase.php">List of cases</a></li>
                    <li><a href="linksofapps.html">Links of Apps</a></li>
                </ul>
    </div>

如何改变它的颜色？之前谢谢..

【参考方案1】：

你可以使用：

.active a
    color: red !important;

或者为了避免!important，使用：

.nav-pills > li.active > a
    color: red;

DEMO

【参考方案2】：

以下代码为所有锚标记应用红色。

a 
   color: red !important;
  

要仅在“nav-static”包装器中应用颜色，请使用以下代码。

.nav-static .active a
   color: red !important;

【参考方案3】：

如果上述答案不起作用，请尝试 -

.active a
    background-color : red !important;

【参考方案4】：

为每个标签元素添加这个

<a onclick="addHighlightedClass(event)" 

然后将此脚本添加到您的页面

  <script>
          function addHighlightedClass(event) 
            var target = event.currentTarget;
            if (window.previewHighlited)
              window.previewHighlited.classList.remove("active");
        
            target.classList.add("active");
            window.previewHighlited = target;
          
  </script>

这是一个演示 https://jsfiddle.net/bilalmix12/vkouxb7a/3/