Jquery ve bootstrap'ta yeniyim, bu yüzden lütfen hatalarımı dikkate alın. Giriş ve kayıt için bir bootstrap modal oluşturdum. Giriş ve kayıt olarak adlandırılan iki nav sekmesi içerir. aynı Modal penceresini açan, ancak Modal penceresinin içinde farklı bir sekme görüntüleyen iki düğmem var. Her sekmede bir dizi girdiye sahip bir form var. Sorunum, sayfamdaki 'login' düğmesine tıkladığımda modalde açılan oturum açma sekmesi ve 'register' düğmesine tıkladığımda açılan kayıt sekmesi ile modalin açılmasını sağlamak.
Bunlar, modalin açıldığı 2 bağlantıdır:
<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>
İşte benim sekme kodum ve içerikleri (burada gereksiz kodlardan kaçınıyorum):
<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 -->
Bunun jquery ile kolayca yapılabileceğini düşünüyorum ama tam olarak nasıl yapılacağını bilmiyorum. Bu yüzden lütfen sorunumu çözmemde bana yardımcı olabilecek biri var mı?
.nav-tabs'den bir seçici uygulamak işe yarıyor gibi görünüyor
HTML şudur
<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 şudur
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
Yukarıdaki cevap için teşekkürler, işte şimdi çalışan jQuery kodum:
$(".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');
};
Doğru anladığımdan emin değilim ama burada Bootstrap sekme menüsünden bağlantıları açmak için kullandığım kod parçacığı var:
<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')
})