如何在单击使用 jQuery 的特定链接时打开引导程序导航选项卡的特定选项卡? [英] How to open specific tab of bootstrap nav tabs on click of a particuler link using 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 的特定链接时打开引导程序导航选项卡的特定选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！