Question

我正在修改一个引导主题并且有一个棘手的小问题（也出现在未修改的主题中），因为当页面首次加载时，活动/当前选项卡不会显示。标记为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提供正确的类，因此您使用的是活动的和当前的，通常只有一个。您需要在html中分配活动类，以便css / js知道加载页面时的活动状态。此外，您可以将li定位为.service_tabe_menu li或ul li，因为ul具有类service_tabe_menu，您不会使用.service_tabe_menu ul，因为该类中没有ul。希望这会有所帮助。

CSS（引导程序）：未突出显示活动/当前选项卡式菜单项

1 个答案: