0
我有问题要保留我的左导航栏中的活动标签。我加载第一个选项卡激活的页面。当我点击其他选项卡时，这个新选项卡处于活动状态，但第一个选项卡仍处于活动状态。我只想激活我点击的标签。Bootstrap导航标签有效
我的HTML
<div id="container">
<div class="row" style="margin-left: 0px;">
<div class="col-xs-2">
<h4><i class="glyphicon glyphicon-briefcase"></i>
<small><b>Partner</b></small>
</h4>
<ul class="nav nav-tabs tabs-left">
<li class="active"><a href="#partnerInfo" data-toggle="tab">Partner Core Info</a></li>
<li><a href="#partnerUsers" data-toggle="tab">Partner Users</a></li>
<li><a href="#partnerProperties" data-toggle="tab">Partner Properties</a></li>
<li><a href="#partnerSalesRep" data-toggle="tab">Partner Sales Reps</a></li>
</ul>
<h4><i class="glyphicon glyphicon-user"></i>
<small><b>Customer</b></small>
</h4>
<ul class="nav nav-tabs tabs-left">
<li><a href="#customerUsers" data-toggle="tab">Customer Users</a></li>
<li><a href="#customerProperties" data-toggle="tab">Customer Properties</a></li>
<li><a href="#customerBilling" data-toggle="tab">Customers Biling</a></li>
</ul>
</div>
<div class="col-xs-10">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="partnerInfo">
Messages Tab.
</div>
<div class="tab-pane" id="partnerUsers">
Messages Tab.
</div>
<div class="tab-pane" id="partnerProperties">Settings Tab.</div>
<div class="tab-pane" id="partnerSalesRep">Settings Tab.</div>
<div class="tab-pane" id="customerUsers">Settings Tab.</div>
<div class="tab-pane" id="customerProperties">
Messages Tab.
</div>
<div class="tab-pane" id="customerBilling">Settings Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
我的CSS：
.tabs-left, .tabs-right {
border-bottom: none;
padding-top: 2px;
}
.tabs-left {
border-right: 1px solid #ddd;
}
.tabs-right {
border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
float: none;
margin-bottom: 2px;
}
.tabs-left>li {
margin-right: -1px;
}
.tabs-right>li {
margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
border-bottom-color: #ddd;
border-right-color: transparent;
}
.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
border-bottom: 1px solid #ddd;
border-left-color: transparent;
}
.tabs-left>li>a {
border-radius: 4px 0 0 4px;
margin-right: 0;
display:block;
}
.tabs-right>li>a {
border-radius: 0 4px 4px 0;
margin-right: 0;
}
.vertical-text {
margin-top:50px;
border: none;
position: relative;
}
.vertical-text>li {
height: 20px;
width: 120px;
margin-bottom: 100px;
}
.vertical-text>li>a {
border-bottom: 1px solid #ddd;
border-right-color: transparent;
text-align: center;
border-radius: 4px 4px 0px 0px;
}
.vertical-text>li.active>a,
.vertical-text>li.active>a:hover,
.vertical-text>li.active>a:focus {
border-bottom-color: transparent;
border-right-color: #ddd;
border-left-color: #ddd;
}
.vertical-text.tabs-left {
left: -50px;
}
.vertical-text.tabs-right {
right: -50px;
}
.vertical-text.tabs-right>li {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.vertical-text.tabs-left>li {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
有谁知道是什么问题？我的CSS？
感谢