twitter-bootstrap 在同一页面上引导多个选项卡并仅显示一个选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38904985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 00:13:05 来源:igfitidea点击:
Bootstrap multiple tab on same page and show only one tab
提问by Himal
I have a multiple Bootstrap tabs on the same page. Everything works fine when I click on one tab (it shows its content). But I want to hide other tabs when one tab is active. Is there any way to do this?
我在同一页面上有多个 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>
This is what I've tried so far:
这是我迄今为止尝试过的：
$(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();
});
})
回答by Mutual Designs
Additional javascript isn't needed here. You can simply use the Bootstrap default code to make this happen.
这里不需要额外的 javascript。您可以简单地使用 Bootstrap 默认代码来实现这一点。
Just make sure that all of your identifiers for each tab are unique and you can set it up like the following pen:
只需确保每个选项卡的所有标识符都是唯一的，您可以像下面这样设置它：
http://codepen.io/mutualdesigns/pen/pbGjbX
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>
