引导导航-标签激活

Question

我有问题要把活动标签保留在我左边的导航标签上。我使用激活的第一个选项卡加载页面。当我单击其他选项卡时，这个新选项卡是活动的，但第一个选项卡仍然是活动的。我只想激活我点击的选项卡。

我的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吗？

谢谢

Answer 1

问题是您有两个不同的nav元素。把它们组合成一个，见我的小小提琴：引导导航选项卡，带有标题分隔符

看起来您介绍这个问题是因为您想要导航标题分隔符，所以只需使用文本和图标创建<li>元素即可。nav应该是这样的：

 <ul class="nav nav-tabs tabs-left">
           <li class="divider">
               <h4><i class="glyphicon glyphicon-briefcase"></i>
                <small><b>Partner</b></small>
                </h4>
            </li>
                <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>
            <li class="divider">            <h4><i class="glyphicon glyphicon-user"></i>
                <small><b>Customer</b></small>
            </h4></li>
                <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>

Answer 2

我已经添加了固定的代码，并在头中请添加jquery脚本，这样它才能工作。我已经测试过了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>







 <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" role="tablist">
            <li role="presentation" class="active"><a href="#partnerInfo" aria-controls="partnerInfo" data-toggle="tab">Partner Core Info</a></li>
            <li role="presentation"><a href="#partnerUsers" aria-controls="partnerUsers" data-toggle="tab">Partner Users</a></li>
            <li role="presentation"><a href="#partnerProperties" aria-controls="partnerProperties" data-toggle="tab">Partner Properties</a></li>
            <li role="presentation"><a href="#partnerSalesRep" aria-controls="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" role="tablist">
            <li role="presentation"><a href="#customerUsers" aria-controls="customerUsers" role="tab" data-toggle="tab">Customer Users</a></li>
            <li role="presentation"><a href="#customerProperties" aria-controls="customerProperties" role="tab" data-toggle="tab">Customer Properties</a></li>
            <li role="presentation"><a href="#customerBilling" aria-controls="customerBilling" role="tab" data-toggle="tab">Customers Biling</a></li>
        </ul>
    </div>
    <div class="col-xs-10">
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="partnerInfo">
                Messages Tab.
            </div>
            <div role="tabpanel" class="tab-pane" id="partnerUsers">
                Messages Tab.
            </div>
            <div role="tabpanel" class="tab-pane active" id="partnerProperties">Settings Tab.</div>
            <div role="tabpanel" class="tab-pane" id="partnerSalesRep">Settings Tab.</div>
            <div role="tabpanel" class="tab-pane" id="customerUsers">Settings Tab.</div>
            <div role="tabpanel" class="tab-pane" id="customerProperties">
                Messages Tab.
            </div>
            <div role="tabpanel" class="tab-pane" id="customerBilling">Settings Tab.</div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

​