CSS (bootstrap) : active/current 选项卡式菜单项未突出显示

Question

我正在修改 bootstrap 主题并遇到一个棘手的小问题（也出现在未修改的主题中），当页面首次加载时，active/current 选项卡不显示为这样的。标记为 FIRST 的选项卡在页面加载时应显示为青色背景，但它只会在单击时从灰色变为青色。

HTML 看起来像这样：

<ul class="service_tabe_menu nav nav-tabs" role="tablist">
  <li role="presentation" class = "current"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">FIRST</a></li>
  <li role="presentation"><a href="#second" aria-controls="second" role="tab" 
  data-toggle="tab">SECOND</a></li>
  <li role="presentation"><a href="#third" aria-controls="third" role="tab" data-toggle="tab">THIRD</a></li>
</ul>

而 CSS 是这样的：

.service .nav-tabs>li>a{
    text-align: center;
    color: #444444;
    width: 150px;
    height: 80px;
    margin-left:10px;
    background: url(../images/skmenubg.png) no-repeat top center;
    border:0px;
    transition: all 0.6s;
}
.service_tabe_menu.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
    background: url(../images/skmenubgh.png) no-repeat top center;
    width:150px;
    height: 80px;
    color:#fff;

}
.service_tabe ul li a:hover{
   background: url(../images/skmenubgha.png) no-repeat top center;
   color:#fff;
}

.service_tabe_menu li nav nav-tabs li.current a:active {
   background: url(../images/skmenubgh.png) no-repeat top center;
   color:#fff;
}

.service_tabe ul li a i{
    font-size:2rem;
    margin-top:40px;
    margin-bottom:25px;
}

.service .tab-content{
    margin-top:100px;
}

我是不是走错了路？编辑：根据反馈更新

Answer 1

您的样式表中缺少一些 letters/classes。 codepen with fixes

您想确保为 javascript 提供正确的 classes，因此您使用的是 active 和 current，通常只有一个。您需要在 html 中分配活动 class，以便 css/js 知道加载页面时活动的内容。此外，您可以将 li 定位为 .service_tabe_menu li 或 ul li，因为 ul 具有 class service_tabe_menu，您不使用 .service_tabe_menu ul 因为没有ul 里面 class。希望这有帮助。

CSS (bootstrap) : active/current 选项卡式菜单项未突出显示

CSS (bootstrap) : active/current tabbed menu item not highlighted

html

css

css-tables