引导选项卡在打开时不显示活动状态

Question

我有4个选项卡式窗格，其中包含各种内容。它们工作正常，当我单击它们时它们会更改。尽管由于某些原因，当我单击它们时它们没有显示为活动状态，即，如果单击“第三年”，则背景应变为蓝色，如您在本CSS中所见：

.tabs .nav-tabs li.active a {
  color: #fff;
  background: #4582EC;
  border: 2px solid #4582EC;
}

当我单击它们时，谁能看到他们为什么不变为活动状态？

jsfiddle：https://jsfiddle.net/dngpqrwy/

Answer 1

这是因为您选择li作为活动班。只需更改此代码的稳定性，它将起作用：

HTML中：

第一年

在CSS中：

   .tabs .nav-tabs > li, .tabs .nav-pills > li {
  float: none;
  display: inline-block;
  margin-bottom: 10px;
  width: 180px;
 border: 2px solid #4582EC;
  padding: 5px 5px;
}

.tabs .nav-tabs {
  text-align: center;
  border-bottom: 0;
  margin-bottom: 20px;

}

.tabs .nav-tabs li:not(:last-child) {
  margin-right: 10px;
}

.tabs .nav-tabs li a {
  text-transform: capitalize;
  font-size: 20px;
/*   padding: 10px 25px;
  border: 2px solid #4582EC; */
  border-radius: 0;
  transition: all .3s ease;
  font-weight: 600;
  color: #4582EC;
  font-family: "Source Sans Pro", sans-serif;

}

.tabs .nav-tabs li:hover {
  background: #4582EC;
  color: #fff;
  border: 2px solid #4582EC;
}
.tabs .nav-tabs li:hover a{
   color: #fff;
 }
.tabs .nav-tabs li.active > a{
  color: #fff;
}
li.active{
  background: #4582EC;
}