gpt4 book ai didi

javascript - 如何使用 jQuery 单击特定链接打开 Bootstrap 导航选项卡的特定选项卡?

转载 作者:IT王子 更新时间:2023-10-29 02:54:01 25 4
gpt4 key购买 nike

我是 jquery 和 bootstrap 的新手,所以请考虑我的错误。我已经创建了一个用于登录和注册的 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" >
<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>

这是我的标签代码及其内容(我在这里避免了不必要的代码):

 <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 -->

我认为这可以通过 jquery 轻松完成。但我不知 Prop 体怎么做。那么,谁能帮我解决我的问题。提前谢谢你?

最佳答案

从 .nav-tabs 应用选择器似乎有效

HTML

<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>

脚本

$(document).ready(function(){
activaTab('aaa');
});

function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

http://jsfiddle.net/pThn6/80/

关于javascript - 如何使用 jQuery 单击特定链接打开 Bootstrap 导航选项卡的特定选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19589053/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com