javascript - 打开时 Bootstrap 选项卡不显示事件

Question

我有 4 个选项卡 Pane ，其中包含各种内容。它们工作正常，当我点击它们时它们会发生变化。尽管出于某种原因，当我单击它们时它们没有显示为事件状态，即如果我单击“第三年”，背景应该变为蓝色，如您在这段 CSS 中所见:

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

有人能看出为什么当我点击它们时它们没有变为事件状态吗？

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

Answer 1

是因为你把li当成active类了。只需更改这段代码，它就会起作用:

在 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;
}