How to open a specific bootstrap boot tab tab when clicking a link using jQuery?

Question

I am new to jquery and bootstrap, so please review my errors. I created bootstrap modal for login and registration. It contains two navigation tabs called login and registration. I have two buttons that go to the same Modal window, but display another tab inside the Modal window. Each tab has a form with several inputs. My problem is that the modality popped up with the login tab open in modal mode when I click the "Login" button and open the registration tab when I click the "register" button on my page.

These are 2 links that open the modal form:

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

Here is my code for the tabs and their contents (I avoid unnecessary code here):

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

I think this can be done through jquery easily. But I don’t know exactly how to do this. So please, can someone help me solve my problem. Thanks in advance?

Answer 1

Using tab selector .nav-tabs works

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> 

Script -

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

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

Answer 2

HTML:

 <a href="PageName.php#tabID">link to other page tab</a> 

Javascript:

 window.onload = function(){ var url = document.location.toString(); if (url.match('#')) { $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show'); } //Change hash for page-reload $('.nav-tabs a[href=#' + url.split('#')[1] + ']').on('shown', function (e) { window.location.hash = e.target.hash; }); } 

Answer 3

You can also access through the tab identifier, but this identifier is unique to the same page. Here is an example of the same

 $('#product_detail').tab('show'); 

In the above #product_details example #product_details is nav tab id

Answer 4

Thanks for the answer above, here is my jQuery code that works now:

 $(".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'); }; 

Answer 5

Hi, Try these people!

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // save current clicked tab in local storage localStorage.setItem('lastActiveTab', $(this).attr('href')); }); //get last active tab from local storage var lastTab = localStorage.getItem('lastActiveTab'); alert(lastTab +"tab was last active") if (lastTab) { $('[href="' + lastTab + '"]').tab('show'); } 

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div> </div> 

Answer 6

Can I suggest a php + css solution that I used on my site? This is simple and not js problem :)

url to page: <a href="page.php?tab=menu1">link to menu1</a>

 <? $tab = $_GET['tab']; ?> <ul class="nav nav-tabs"> <li class="<? if ($tab=='menu1' OR $tab=='menu2') { echo ""; } else { echo "active"; } ?>"><a data-toggle="tab" href="#home">Prodotti</a></li> <li class="<? if ($tab=='menu1') { echo "active"; } ?>"><a data-toggle="tab" href="#menu1">News</a></li> <li class="<? if ($tab=='menu2') { echo "active"; } ?>"><a data-toggle="tab" href="#menu2">Gallery</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade <? if ($tab=='menu1' OR $tab=='menu2') { echo ""; } else { echo "in active"; } ?> "> <h3>Prodotti</h3> <p>Contenuto della pagina, zona prodotti</p> </div> <div id="menu1" class="tab-pane fade <? if ($tab=='menu1') { echo "in active"; } ?>"> <h3>News</h3> <p>Qui ci saranno le news.</p> </div> <div id="menu2" class="tab-pane fade <? if ($tab=='menu2') { echo "in active"; } ?>"> <h3>Gallery</h3> <p>Qui ci sarà la gallery</p> </div> </div> 

Answer 7

  function updateURL(url_params) { if (history.pushState) { var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + url_params; window.history.replaceState({path:newurl},'',newurl); } } function setActiveTab(tab) { $('.nav-tabs li').removeClass('active'); $('.tab-content .tab-pane').removeClass('active'); $('a[href="#tab-' + tab + '"]').closest('li').addClass('active'); $('#tab-' + tab).addClass('active'); } // Set active tab $url_params = new URLSearchParams(window.location.search); // Get active tab and remember it $('a[data-toggle="tab"]') .on('click', function() { $href = $(this).attr('href') $active_tab = $href.replace('#tab-', ''); $url_params.set('tab', $active_tab); updateURL($url_params.toString()); }); if ($url_params.has('tab')) { $tab = $url_params.get('tab'); $tab = '#tab-' + $tab; $myTab = JSON.stringify($tab); $thisTab = $('.nav-tabs a[href=' + $myTab +']'); $('.nav-tabs a[href=' + $myTab +']').tab('show'); } 

Answer 8

Not sure if I understood correctly, but here is a snippet that I use to open links from the Bootstrap tab menu :

HTML

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

Javascript

 $('.nav a:not(".external")').click(function (e) { e.preventDefault() $(this).tab('show') })