我在同一个页面上有多个 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();
});
})
最佳答案
这里不需要额外的 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>
关于javascript - 在同一页面上 Bootstrap 多个选项卡并仅显示一个选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38904985/