本文介绍了如何在单击使用 jQuery 的特定链接时打开引导程序导航选项卡的特定选项卡?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 jquery 和 bootstrap 的新手，所以请考虑我的错误.我创建了一个用于登录和注册的引导模式.它包含两个称为登录和注册的导航选项卡.我有两个按钮可以弹出相同的模态窗口，但在模态窗口内显示不同的选项卡.每个选项卡中都有一个包含多个输入的表单.我的问题是当我单击登录"按钮时弹出模态并在模态中打开登录选项卡，当我单击页面上的注册"按钮时打开注册选项卡.
这些是打开模态的 2 个链接:
<div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;"><a data-toggle="modal" href="#regestration" class="header-register-a" ><大><font color="white" class="header-register-font"><center style="margin-top:20px;">登录<i class="icon-chevron-down" style="font-size:20px"></i></center></font></big></a></div><div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;"><a data-toggle="modal" href="#regestration" class="header-register-a" ><大><font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font></big></a>
这是我的标签及其内容的代码(我在这里避免了不必要的代码):
<ul class="nav nav-tabs" ><!--tabs--><li class="active" style="position:absolute;margin-left:0px;"id="登录标签"><a href="#pane_login" data-toggle="tab">登录</a></li><li style="margin-left:70px;"id="reg_tab" ><a href="#pane_reg" data-toggle="tab">注册</a></li><div class="tab-content"><!--登录标签内容--><div id="pane_login" class="tab-pane active"><form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form"></表单></div><!--/pane_login--><div id="pane_reg" class="tab-pane"><!--注册标签内容--><form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form"></表单>
</div><!--/.tab-content --></div><!--/.tabbable -->
我认为这可以通过 jquery 轻松完成.但我不知道该怎么做.所以，请谁能帮我解决我的问题.提前谢谢你?
解决方案
从 .nav-tabs 应用选择器似乎有效
HTML 是
<li><a href="#aaa" data-toggle="tab">AAA</a></li><li><a href="#bbb" data-toggle="tab">BBB</a></li><li><a href="#ccc" data-toggle="tab">CCC</a></li>
<div class="tab-content" id="tabs"><div class="tab-pane" id="aaa">...内容...</div><div class="tab-pane" id="bbb">...内容...</div><div class="tab-pane" id="ccc">...内容...</div>
脚本是
$(document).ready(function(){activaTab('aaa');});功能激活标签(标签){$('.nav-tabs a[href="#' + tab + '"]').tab('show');};
http://jsfiddle.net/pThn6/80/
I am new to jquery and bootstrap,so please consider my mistakes.I have created a bootstrap modal for login and registration. It contains two nav-tabs called as login and registration.I have two buttons that popup the same Modal window, but display a different tab inside the Modal window. In each tab is a form with a number of inputs. My issue is getting the modal popped up with login tab opened in the modal when i click on the 'login' button and registration tab opened when i click on the 'register' button on my page.
These are 2 links on which the modal opens:
<div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font>
</big></a></div>
<div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font>
</big></a>
Here is my code of tabs and their contents(i am avoiding unnecessary code here):
<div class="tabbable" >
<ul class="nav nav-tabs" ><!--tabs-->
<li class="active" style="position:absolute;margin-left:0px;" id="logintab">
<a href="#pane_login" data-toggle="tab">Login</a></li>
<li style="margin-left:70px;" id="reg_tab" ><a href="#pane_reg" data-toggle="tab">Registration</a></li>
</ul>
<div class="tab-content"><!--login tab content-->
<div id="pane_login" class="tab-pane active">
<form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form">
</form>
</div><!--/pane_login-->
<div id="pane_reg" class="tab-pane"><!--registration tab content-->
<form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form">
</form>
</div>
</div><!-- /.tab-content -->
</div><!-- /.tabbable -->
I think this can be done through jquery easily.But i dont know exactly how to do it.So,please can anyone help me to solve my problem.Thank you in advance ?
解决方案
Applying a selector from the .nav-tabs seems to be working
HTML is
<ul class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Script is
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
http://jsfiddle.net/pThn6/80/
这篇关于如何在单击使用 jQuery 的特定链接时打开引导程序导航选项卡的特定选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
