在同一页上引导多个选项卡并仅显示一个选项卡

Question

我在同一页上有多个Bootstrap标签。当我点击一个选项卡(它显示了它的内容)时，一切都正常。但当一个选项卡处于活动状态时，我想隐藏其他选项卡。有没有办法做到这一点？

<div class="pane-content-inner">
    <div id="guides-tabs">
        <ul class="nav nav-tabs tabs-group top">
            <li class="col-md-3 study-inn" tabindex="0" class="tab tab-1 ">
                <a data-toggle="tab" data-target="#1" class="box box-1 jquery-once-6-processed"><span tabindex="0" class="text">Harvard Medical School Overview</span></a>
            </li>
            <li class="col-md-3 study-inn" tabindex="1" class="tab tab-2">
                <a data-toggle="tab" data-target="#2" class="box box-2 jquery-once-6-processed"><span tabindex="1" class="text">Medical Program and Specialities</span></a>
            </li>
            <li class="col-md-3 study-inn" tabindex="2" class="tab tab-3">
                <a data-toggle="tab" data-target="#3" class="box box-3 jquery-once-6-processed"><span tabindex="2" class="text">Medical & Clinical Research</span></a>
            </li>
            <li class="col-md-3 study-inn" tabindex="4" class="tab tab-4">
                <a data-toggle="tab" data-target="#4" class="box box-4 jquery-once-6-processed"><span tabindex="2" class="text">Admissions</span></a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="1" class="tab-pane ">
                <h2>Universities in Norway</h2>
                <p>Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some </p>
                </p>
            </div>
            <div id="2" class="tab-pane ">
                <h2>Universities in Norway</h2>
                <p>Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some </p>
                </p>
            </div>
            <div id="3" class="tab-pane ">
                <h2>Universities in Norway</h2>
                </p>
            </div>
            <div id="4" class="tab-pane ">
                <h2>Universities in Norway</h2>
                </p>
            </div>
            </p>
        </div>
        </p>
    </div>
</div>
<div class="pane-content-inner">
    <div id="guides-tabs">
        <ul class="nav nav-tabs tabs-group top">
            <li class="col-md-3 study-inn" tabindex="5" class="tab tab-5 ">
                <a data-toggle="tab" data-target="#5" class="box box-5 jquery-once-6-processed"><span tabindex="0" class="text">Residancy</span></a>
            </li>
            <li class="col-md-3 study-inn" tabindex="6" class="tab tab-6">
                <a data-toggle="tab" data-target="#6" class="box box-6 jquery-once-6-processed"><span tabindex="1" class="text">Costs</span></a>
            </li>
            <li class="col-md-3 study-inn" tabindex="7" class="tab tab-7">
                <a data-toggle="tab" data-target="#7" class="box box-7 jquery-once-6-processed"><span tabindex="2" class="text">Medicine Undergraduate National Fees</span></a>
            </li>
            <li class="col-md-3 study-inn" tabindex="3" class="tab tab-8">
                <a data-toggle="tab" data-target="#8" class="box box-8 jquery-once-6-processed"><span tabindex="2" class="text">Medicine Undergraduate International Fees</span></a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="5" class="tab-pane ">
                <h2>Universities in Norway</h2>
                <p>Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some </p>
                </p>
            </div>
            <div id="6" class="tab-pane ">
                <h2>Universities in Norway</h2>
                <p>Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some </p>
                </p>
            </div>
            <div id="7" class="tab-pane ">
                <h2>Universities in Norway</h2>
                </p>
            </div>
            <div id="8 " class="tab-pane ">
                <h2>Universities in Norway</h2>
                </p>
            </div>
            </p>
        </div>
        </p>
    </div>
</div>

这就是我到目前为止所尝试的：

$(document).ready(function() {
    $('.nav li a').click(function(e) {
        $('.nav li').removeClass('active');
        var $parent = $(this).parent();
        console.log($parent);
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
        e.preventDefault();
    });
})

Answer 1

这里不需要额外的javascript。您可以简单地使用Bootstrap默认代码来实现此目的。

只需确保每个选项卡的所有标识符都是唯一的，您就可以像下面的笔一样设置它：

http://codepen.io/mutualdesigns/pen/pbGjbX

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a href="#5" aria-controls="5" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#6" aria-controls="6" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#7" aria-controls="7" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#8" aria-controls="8" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="1">1</div>
    <div role="tabpanel" class="tab-pane" id="2">2</div>
    <div role="tabpanel" class="tab-pane" id="3">3</div>
    <div role="tabpanel" class="tab-pane" id="4">4</div>
    <div role="tabpanel" class="tab-pane" id="5">5</div>
    <div role="tabpanel" class="tab-pane" id="6">6</div>
    <div role="tabpanel" class="tab-pane" id="7">7</div>
    <div role="tabpanel" class="tab-pane" id="8">8</div>
  </div>

</div>