Question

我正在使用引导程序选项卡，并且运行正常。我已使用CSS将边框颜色添加为绿色到活动选项卡，但是当我单击选项卡时，边框颜色为绿色闪烁。如何为活动边框设置永久的边框颜色。

我尝试了以下代码

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#firstTab">View All</a>
    </li>
    <li>
        <a data-toggle="tab" href="#secondTab">Add New</a>
    </li>
</ul>

<div class="tab-content">
    <div id="firstTab" class="tab-pane fade in active">
        Tab 1 Content
    </div>
    <div id="secondTab" class="tab-pane fade in ">
        Tab 2 Content
    </div>
</div>

css文件

ul.nav.nav-tabs {
    margin: 10px 0px;
}

ul.nav.nav-tabs li:not(.active) a {
    background-color: #eeeeee;
    color: grey;
    }

ul.nav.nav-tabs li:active a {
   border-top: 30px solid #16a765;
    }

Answer 1

您正在将:active伪选择器（通常与链接和按钮关联）与Bootstrap应用于当前选定选项卡的.active类混淆。

ul.nav.nav-tabs li.active a { /* <-- dot, not colon */
   border-top: 30px solid #16a765;
}

Answer 2

尝试此代码。希望对您有帮助。我在css文件的底部添加了一些代码。并且使用注释来表示。

ul.nav.nav-tabs {
    margin: 10px 0px;
}

ul.nav.nav-tabs li:not(.active) a {
    background-color: #eeeeee;
    color: grey;
    }

/* My code starts here */
ul.nav.nav-tabs li {
   border-top: 5px solid transparent;
}

ul.nav.nav-tabs li.active {
  border-top: 5px solid #16a765;
}
/* My code ends here */

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#firstTab">View All</a>
    </li>
    <li>
        <a data-toggle="tab" href="#secondTab">Add New</a>
    </li>
</ul>

<div class="tab-content">
    <div id="firstTab" class="tab-pane fade in active">
        Tab 1 Content
    </div>
    <div id="secondTab" class="tab-pane fade in ">
        Tab 2 Content
    </div>
</div>

为什么不应用我的活动标签样式？

2 个答案: