Я пытаюсь открыть вкладку Bootstrap v.3 при загрузке страницы, используя jQuery.Я пробовал
$('#activeTab3').addClass("active");
и
$('#activeTab3').tab('show')
, которые окрашивают кнопку в списке навигации, но отображаемый контент принадлежит 1-й вкладке.
Я также пытался:
$("#mytabs").tabs({
active: 1
});
, но я получаю сообщение об ошибке, что вкладки не являются функцией ..
$('#activeTab3').addClass("active");
//$('#activeTab3').tab('show')
/*
$("#mytabs").tabs({
active: 1
});
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row mtop-2">
<div class="col-md-12 col-xs-10">
<ul class="nav nav-pills" role="tablist" id="mytabs">
<li role="presentation" id="activeTab1"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">tab1</a></li>
<li role="presentation" id="activeTab2"><a href="#tab2" aria-controls="home" role="tab" data-toggle="tab">tab2</a></li>
<li role="presentation" id="activeTab3"><a href="#tab3" aria-controls="home" role="tab" data-toggle="tab">tab3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMachine1" aria-expanded="true" aria-controls="collapseMachine1">
<i class="fa fa-plus mright-1"></i> panel 1-1
</a>
</h4>
</div>
<div id="collapseMachine1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMachine1">
<div class="panel-body">
<div class="row mtop-2">
.... panel 1-1
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMachine2" aria-expanded="false" aria-controls="collapseMachine2">
<i class="fa fa-edit mright-1"></i> panel 1-2
</a>
</h4>
</div>
<div id="collapseMachine2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMachine2">
<div class="panel-body">
.... panel 1-3
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRobot1" aria-expanded="true" aria-controls="collapseRobot1">
<i class="fa fa-plus mright-1"></i> panel 2-1
</a>
</h4>
</div>
<div id="collapseRobot1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseRobot1">
<div class="panel-body">
panel 2-1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRobot2" aria-expanded="false" aria-controls="collapseRobot2">
<i class="fa fa-edit mright-1"></i> panel 2-2
</a>
</h4>
</div>
<div id="collapseRobot2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseRobot2">
<div class="panel-body">
panel 2-2
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMould1" aria-expanded="true" aria-controls="collapseMould1">
<i class="fa fa-plus mright-1"></i> panel 3-1
</a>
</h4>
</div>
<div id="collapseMould1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMould1">
<div class="panel-body">
panel 3-1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMould2" aria-expanded="false" aria-controls="collapseMould2">
<i class="fa fa-edit mright-1"></i> panel 3-2
</a>
</h4>
</div>
<div id="collapseMould2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMould2">
<div class="panel-body">
panel 3-2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>