I'm not able to get open first tab on page load. Code below.
<ul id="rowTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab_a">Tab A</a></li>
<li><a data-toggle="tab" href="#tab_b">Tab B</a></li>
<li><a data-toggle="tab" href="#tab_c">Tab C</a></li>
<li><a data-toggle="tab" href="#tab_d">Tab D</a></li>
</ul>
<div class="tab-content">
<div id="tab_a" class="tab-pane fade active">
Tab A inner
</div>
<div id="tab_b" class="tab-pane fade">
Tab B inner
</div>
<div id="tab_c" class="tab-pane fade">
Tab C inner
</div>
<div id="tab_d" class="tab-pane fade">
Tab D inner
</div>
</div>
and jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#rowTab a:first').tab('show');
});
</script>
Any clue why is not working?
Thanks
Answer: Use the HTML5 localStorage Object In Bootstrap, if you refresh the page the tab is reset to default setting. However, you can use the HTML5 localStorage object to save some parameter for the current tab locally in the browser and get it back to make the last active tab selected on page reload.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
tab=x (where x=tab number) to the URL to display the specific tab. For example: https://demo.dj-extensions.com/dj-tabs/?tab=4 will open 4th tab on the demo site, you can try changing the number to another one to see how it works.
Remove the fade
class from the first tab's content..
<div id="tab_a" class="tab-pane active">
Tab A inner
</div>
http://bootply.com/129046
And working version with the fade
<div id="tab_a" class="tab-pane active fade in">
Tab A inner
</div>
Baghoo - Thanks for pointing me to what is causing issue
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With