我有4个选项卡式窗格,其中包含各种内容。它们工作正常,当我单击它们时它们会更改。尽管由于某些原因,当我单击它们时它们没有显示为活动状态,即,如果单击“第三年”,则背景应该变为蓝色,如您在此CSS上所见:
.tabs .nav-tabs li.active a {
color: #fff;
background: #4582EC;
border: 2px solid #4582EC;
}
当我单击它们时,谁能看到为什么他们没有变为活动状态?
jsfiddle:https://jsfiddle.net/dngpqrwy/
答案 0 :(得分:3)
这是因为您选择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;
}