我如何有链接打开一个特定的选项卡内引导模态
How do I have links open a specific tab inside a Bootstrap modal?
我在网页底部有5个链接。它们链接到一个Bootstrap模式,其中的标签与网页上的链接相匹配,但它总是默认为第一个标签/标签内容。我怎么能有链接打开正确的选项卡/选项卡内容在模态。
这是我的代码模态和链接是在网页上:
<div id="LegalModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#283c5a; border-radius: 5px 5px 0 0;">
<a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Close</a>
<h3>rateGenius Legal Terms & Agreements</h3>
</div>
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a class="tab1" href="#tab1" data-toggle="tab">Terms of Use</a></li>
<li><a href="#tab2" data-toggle="tab">Privacy Policy</a></li>
<li><a href="#tab3" data-toggle="tab">Mobile Privacy Policy</a></li>
<li><a href="#tab4" data-toggle="tab">Security</a></li>
<li><a href="#tab5" data-toggle="tab">Licensing</a></li>
</ul>
<div class="tab-content" id="tabs" style="padding:30px;">
<div class="tab-pane active" id="tab1">
<h1>Terms of Use</h1>
</div>
<div class="tab-pane" id="tab2">
<h1>Privacy Policy</h1>
</div>
<div class="tab-pane" id="tab3">
<h1>Mobile Privacy Policy</h1>
</div>
<div class="tab-pane" id="tab4">
<h1>Security</h1>
</div>
<div class="tab-pane" id="tab5">
<h1>Licensing</h1>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
</div>
<ul class="list-unstyled" style="text-align:center;">
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Terms of Service</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Privacy Policy</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Mobile Privacy Policy</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal">Security</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal">Licensing</a></li>
</ul>
通过连接一些自定义jQuery来连接链接,使锚既可以切换模态又可以切换正确的选项卡:
$(function() {
$('.legal-tabs li').on('click', function() {
var tab = $(this).index();
$('#LegalModal .modal-body .nav-tabs a:eq(' + tab + ')').tab('show');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<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.5/js/bootstrap.min.js"></script>
<div id="LegalModal" class="modal fade bs-example-modal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a class="tab1" href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content" id="tabs" style="padding:30px;">
<div class="tab-pane active" id="tab1">
<h1>Terms of Use</h1>
</div>
<div class="tab-pane" id="tab2">
<h1>Privacy Policy</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="list-unstyled legal-tabs" style="text-align:center;">
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal">Show tab 1</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal">Show tab 2</a></li>
</ul>
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- SemanticUI模态not onDeny/onApprove事件未激发
- 触发模态事件时单击选项卡
- 为多个模态指定选项 - 具体化
- 在角度模态打开后设置选项
- 将表单提交到新选项卡并关闭模态
- Knockout JS-点击加载所选项目的模态编辑表单
- Jquery模态+使用select的默认选项卡
- 我怎么能重定向到第一个选项卡在模态弹出后,我关闭模态弹出
- 在模态窗口中实现可滚动选项卡
- 如何使一个模态窗口的选项作为js确认
- 我如何有链接打开一个特定的选项卡内引导模态
- 具有多个模态的多选项卡页面(引导)
- 如何启用超链接打开模态对话框,同时也允许在同一链接上的新选项卡中打开
- 是否有可能显示模态框,只有当用户点击关闭选项卡/浏览器按钮
- 引导模态对话框选项卡在后面的页面
- 在有效的选择选项上显示模态
- Twitter Bootstrap:模态对话选项卡
- Jquery modal:关闭一个模态,然后让它成为一个可点击的选项