代码之家 › 专栏 › 技术社区 › krish

在导航选项卡中为选项卡添加背景

css

-1

krish · 技术社区 · 6 年前

这是我的例子-css是我尝试过的。

.active::before li {
  background: yellow !important;
}

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="breadcrumb">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted'}"><a href="#pendingApproval" data-toggle="tab">Pending Approval</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending'}"><a href="#workInProgress" data-toggle="tab">Work In Progress</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending' || dataStatus=='inprogress'}"><a href="#complete" data-toggle="tab">Complete</a></li>
    </ul>
  </div>

  <div class="tab-content" style="margin:5%;">
    <div class="tab-pane active" id="submitted" ng-class="{'active':dataStatus=='submitted'}">
      Submitted data will be displayed here....
    </div>
    <div class="tab-pane" id="pendingApproval" ng-class="{'active':dataStatus=='pending'}">
      Pending Approvals will be displayed here....
    </div>
    <div class="tab-pane" id="workInProgress" ng-class="{'active':dataStatus=='inprogress'}">
      In Progress data will be displayed here....
    </div>
    <div class="tab-pane" id="complete" ng-class="{'active':dataStatus=='completed'}">
      Completed data will be displayed here....
    </div>
  </div>
</div>

在这里,我只想为选项卡添加背景色,该选项卡在激活选项卡之前可用(即,具有活动类的选项卡)

小提琴: https://jsfiddle.net/9xf5neyz/30/

2 回复 | 直到 6 年前

SUNIL PATEL 6 年前

解决方案在这里

Just add this css in your code.

.nav-tabs > li:not(.active) a {
    background: yellow;
}

vitomadio 6 年前

在你的css中试试这个。

li.active>a{
    background:yellow;
}

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前