"External link loading tabs"
Bootstrap 3.3.0 Snippet by wondermarq

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> <li><a href="#tab2" data-toggle="tab">Section 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>I'm in Section 1.</p> </div> <div class="tab-pane" id="tab2"> <p>I'm in Section 2.</p> </div> </div> </div> </div>
// Javascript to enable link to tab var hash = document.location.hash; var prefix = "tab_"; if (hash) { $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show'); } // Change hash for page-reload $('.nav-tabs a').on('shown.bs.tab', function (e) { window.location.hash = e.target.hash.replace("#", "#" + prefix); });

Related: See More


Questions / Comments: