如何在使用jQuery点击特定的链接时打开引导导航选项卡的特定选项卡？ [英] How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?

问题描述

我是新的jquery和bootstrap，所以请考虑我的错误。我已创建一个引导模式的登录和注册。它包含两个称为登录和注册的导航选项卡。我有两个弹出相同模态窗口的按钮，但在模态窗口中显示不同的选项卡。在每个选项卡中是具有多个输入的表单。我的问题是，当我点击登录按钮打开登录选项卡，并打开注册选项卡，当我点击我的页面上的注册按钮时，模态弹出模式。

这些是模态打开的两个链接：

 < div class =header-login- listyle =background-color：gray; float：left; width：100px; height：60px;> 
< a data-toggle =modalhref =＃regestrationclass =header-register-a> 
< big> 
< font color =whiteclass =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-listyle =background-color：green; float：right; margin-right：-15px; width：130px; height：60px;> ; 
< a data-toggle =modalhref =＃regestrationclass =header-register-a> 
< big> 
< font color =whiteclass =header-register-font>< center style =margin-top：20px;>注册< / center>< / font& 
< / big>< / a> 
  

这是我的选项卡及其内容的代码（我在这里避免不必要的代码）：

 < div class =tabbable> 
< ul class =nav nav-tabs><！ -  tabs  - > 
< li class =activestyle =position：absolute; margin-left：0px; id =logintab> 
< a href =＃pane_logindata-toggle =tab>登录< / a>< / li> 
< li style =margin-left：70px; id =reg_tab>< a href =＃pane_regdata-toggle =tab>注册< / a>< / li> 
 
< / ul> 
< div class =tab-content><！ -  login tab content  - > 
< div id =pane_loginclass =tab-pane active> 
< form id =login-formtarget =login-signup-iframemethod =postaction =＃name =login-form> 
 
< / form> 
 
< / div><！ -  / pane_login  - > 
 
< div id =pane_regclass =tab-pane><！ - 注册标签内容 - > 
< form id =regestration-formtarget =login-signup-iframemethod =postaction =＃name =regestration-form> 
 
< / form> 
< / div> 
< / div><！ -  /.tab-content  - > 
< / div><！ -  /.tabbable  - > 
  

我认为这可以通过jquery轻松完成。但我不知道如何做。

解决方案

应用一个选择器.nav-tabs似乎正在工作

HTML > < ul class =nav nav-tabs>
< li>< a href =＃aaadata-toggle =tab> AAA< / a>< / li>
< li>< a href =＃bbbdata-toggle =tab> BBB< / a>< / li>
< li>< a href =＃cccdata-toggle =tab> CCC< / a>< / li>
< / ul>
< div class =tab-contentid =tabs>
< div class =tab-paneid =aaa> ... Content ...< / div>
< div class =tab-paneid =bbb> ... Content ...< / div>
< div class =tab-paneid =ccc> ... Content ...< / div>
< / div>


脚本是

  $（document）.ready（function（）{
 activaTab（'aaa'）; 
}）; 
 
 function activaTab（tab）{
 $（'。nav-tabs a [href =＃'+ tab +']'）。 
}; 
  

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点击特定的链接时打开引导导航选项卡的特定选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！