我刚学习jquery和bootstrap,请谅解我的错误。我创建了一个登录和注册的bootstrap模态框,包含两个名为登录和注册的标签页。我有两个按钮可以弹出同一个模态窗口,但会在模态窗口内显示不同的标签页。每个标签页都有若干个输入框的表单。我的问题是当我在页面上点击“登录”按钮时,在模态窗口中弹出带有“登录”标签页的模态框;而在我点击“注册”按钮时,则弹出带有“注册”标签页的模态框。
这是两个打开模态框的链接:
<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完成。但是我不确定该如何做。 所以,请问有人能帮我解决问题吗?提前谢谢你们!
id
是不必要的,修改href
感觉怪怪的。更加简洁的解决方案是给每个选项卡添加一个id
,这样你就可以将冗长的选择器更改为像$('#' + tab).tab('show');
这样简单的内容。 - skippr.tab('show')
。 - dave thompson