0

Hello all HTML and JS masters! I use Bootstrap, and have problem. I have this TAB

<div class="row">
  <div class="col-md-3 mobilezmiany">
    
    <div class="tabbable tabs-left">
      
                     <ul class="nav nav-tabs">

                          <li class="active"><a href="#29" data-toggle="tab" aria-expanded="true">TAB 1</a></li>

                          <li class=""><a href="#32" data-toggle="tab" aria-expanded="false">TAB 2</a></li>

                     </ul>
                     
                   </div>
                 </div>
                    <div class="col-md-9 boksczarny">

                     <div class="tab-content">


                          <div class="tab-pane active" id="29">

                                <div class="panelsrodek">

                                  <h3 class="pageuslugi">CONTENT TAB 1</h3>

                                <p>TAB CONTENT</p>

                              </div>

                          </div>


                          <div class="tab-pane" id="32">

                                <div class="panelsrodek">

                                  <h3 class="pageuslugi">CONTENT TAB 2</h3>

                                <p>TAB CONTENT 2</p>

                              </div>

                          </div>

                        </div>
                     </div>
                   </div>

And Now I need to use link from another page http://mylink.com/page/#32 and must have selected TAB 2, and this is do not working I try use: Bootstrap linking to a tab with an url and this Linking to a Bootstrap Tab from outside - how to set the tab to "active"?

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = this.href.split('#');
    $('.nav a').filter('[href="#'+target[1]+'"]').tab('show');
})

But still do not working. Could somebody help me? :) Maybe I'm doing something wrong or I'm not good at it JS DOM?

Community
  • 1
  • 1
kamillimi
  • 49
  • 8
  • Please review the other questions/answers. The `shown` event doesn't trigger on page load. You need something to get the hash from the url and trigger `tab('show')`. This explained in all the other questions. – Carol Skelly Apr 04 '17 at 12:37
  • OK, good code is $(document).ready(function(){ // 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', function (e) { //window.location.hash = e.target.hash.replace("#", "#" + prefix); }); – kamillimi Apr 12 '17 at 09:49

0 Answers0