javascript - 使用 jQuery 在页面加载时打开特定的引导选项卡
问题描述
我尝试Bootstrap v.3使用jQuery. 我试过了
$('#activeTab3').addClass("active");
和
$('#activeTab3').tab('show')
它为导航列表中的按钮着色，但显示的内容属于第一个选项卡。
我也试过：
$("#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>解决方案
$(document).ready(function(){
$('#mytabs a[href="#tab3"]').tab('show')
});<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" ><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">tab1</a></li>
<li role="presentation"><a href="#tab2" aria-controls="home" role="tab" data-toggle="tab">tab2</a></li>
<li role="presentation"><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>用于使用$('#mytabs a[href="#tab3"]').tab('show')选项卡 css id 和 href css id 选择选项卡。
推荐阅读
- php - 从多个表中选择过滤器
- ios - 如何从 swift 4 应用程序打开 /var/mobile/Containers/...？
- python - 如何在熊猫数据框中找到两个索引之间的最大值
- python - 如何让 python IDLE/GUI 与 mbed 板通信？
- javascript - Ion.RangeSlider 在垂直方向上的问题
- python - TypeError：“NoneType”对象不可迭代 - 使用 keras 进行文本摘要
- javascript - 如何将数据从一个函数导出到另一个函数
- google-bigquery - 如何计算创建的字段？为什么计算错误？
- javascript - 倒数计时器在新页面上重置
- laravel - 了解文件存储和保护内容 Laravel 5