Ich bin neu in Jquery und Bootstrap, also bitte beachten Sie meine Fehler.Ich habe ein Bootstrap Modal für Login und Registrierung erstellt. Ich habe zwei Schaltflächen, die das gleiche Modal-Fenster aufklappen, aber eine andere Registerkarte innerhalb des Modal-Fensters anzeigen. In jeder Registerkarte befindet sich ein Formular mit einer Reihe von Eingaben. Mein Problem ist, dass das Modal mit der Registerkarte "Login" geöffnet wird, wenn ich auf die Schaltfläche "Login" klicke und die Registerkarte "Registrierung" geöffnet wird, wenn ich auf die Schaltfläche "Registrieren" auf meiner Seite klicke.
Dies sind 2 Links, bei denen sich das Modal öffnet:
<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>
Hier ist mein Code der Tabs und deren Inhalt (ich vermeide hier unnötigen Code):
<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 -->
Ich denke, dies kann durch jquery leicht getan werden, aber ich weiß nicht genau, wie es zu tun. Also, bitte kann mir jemand helfen, mein Problem zu lösen.Vielen Dank im Voraus?
Das Anwenden eines Selektors aus .nav-tabs scheint zu funktionieren
HTML ist
<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>
Skript ist
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
Danke für obige Antwort, hier ist mein jQuery-Code, der jetzt funktioniert:
$(".header-login-li").click(function(){
activaTab('pane_login');
});
$(".header-register-li").click(function(){
activaTab('pane_reg');
$("#reg_log_modal_header_text").css()
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
Nicht sicher, ob ich richtig verstanden, aber hier ist Schnipsel, die ich verwenden, um öffnen Links von Bootstrap Registerkarte Menü:
<ul class="nav nav-tabs">
<li class="active"><a href="#foo" data-toggle="tab">Foo</a></li>
<li><a href="#bar" data-toggle="tab">Bar</a></li>
<li><a href="baz.html" class="external">Baz</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="foo">Foo</div>
<div class="tab-pane" id="bar">Bar</div>
</div>
$('.nav a:not(".external")').click(function (e) {
e.preventDefault()
$(this).tab('show')
})