html - CSS( Bootstrap ): active/current tabbed menu item not highlighted

Question

我正在修改 Bootstrap 主题并遇到一个棘手的小问题(也出现在未修改的主题中)，因为当页面首次加载时，事件/当前选项卡不会这样显示。标记为 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

您的样式表中缺少一些字母/类。 codepen with fixes

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