私はjqueryとbootstrapの初心者なので、私の間違いを考慮してください。私はログインと登録のためのbootstrapのモーダルを作成しました。同じモーダルウィンドウをポップアップする2つのボタンがありますが、モーダルウィンドウの中に別のタブを表示しています。それぞれのタブには、いくつかの入力項目を持つフォームがあります。問題は、私のページで 'login'ボタンをクリックするとモーダルがポップアップし、ログインタブがモーダル内に開かれ、 'register'ボタンをクリックすると登録タブが開かれることです。
これらの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を使って簡単にできると思いますが、具体的にどうすればいいのかわかりません。 どうか、どなたか私の問題を解決するのを助けてください。
.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');
};
上記の回答に感謝し、現在動作している私のjQueryコードを示します。
$(".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');
};
正しく理解しているかどうかはわかりませんが、Bootstrapのタブメニューからリンクを開くために使用しているスニペットは以下の通りです**。
<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')
})