Link do określonej zakładki Bootstrap

Zajmuję się tworzeniem strony z Django Framework i staram się stworzyć sposób, w którym użytkownik uzyskuje dostęp do linku takiego jak http://www.example.com/site/#users_rating otwiera określoną zakładkę na stronie.Link do określonej zakładki Bootstrap

Próbowałem poniższy kod, który znalazłem w Internecie (jestem nowy w JavaScript/jQuery), to nie działa:

<script type="text/javascript"> 
    $(function() { 
     // Javascript to enable link to tab 
     var url = document.location.toString(); 
     if (url.match('#')) { 
     $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ; 
     } 

     // Change hash for page-reload 
     $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
     window.location.hash = e.target.hash; 
     }); 
    }); 
</script>

Mój szablon używa Bootstrap 3, oto kod HTML (z niektórymi znacznikami Django):

<div class="col-md-12" style="margin: 0 auto;"> 
     <section class="panel"> 
      <header class="panel-heading tab-bg-dark-navy-blue"> 
       <ul class="nav nav-tabs nav-justified "> 
        <li class="active"> 
         <a data-toggle="tab" href="#overview"> 
          {% trans "Overview" %} 
         </a> 
        </li> 
        <li class=""> 
         <a data-toggle="tab" href="#timeline"> 
          {% trans "Timeline" %} 
         </a> 
        </li> 
        <li class=""> 
         <a data-toggle="tab" href="#users_rating"> 
          {% trans "Users Ratings" %} ({{ ptc.userrating.count }}) 
         </a> 
        </li> 
        <li class=""> 
         <a data-toggle="tab" href="#rating"> 
          {% trans "Our Rating" %} 
         </a> 
        </li> 
       </ul> 
      </header> 
      <div class="panel-body"> 
       <div class="tab-content tasi-tab"> 


        <!-- Overview Tab-Pane --> 
        <div id="overview" class="tab-pane active"> 
         {% include 'overview.html' %} 
        </div> 

        <!-- Timeline Tab-Pane --> 

        <div id="timeline" class="tab-pane"> 
         {% include 'timeline.html' %} 
        </div> 

        <!-- User Rating Tab-Pane --> 

        <div id="users_rating" class="tab-pane"> 
         {% include 'users_rating.html' %} 
        </div> 

        <!-- Our Rating Tab-Pane --> 

        <div id="rating" class="tab-pane"> 
         {% include 'rating.html' %} 
        </div> 


       </div> 
      </div> 

     </section> 
    </div>

Jak otworzyć konkretną kartę zgodnie z adresem URL w mojej witrynie?

Źródło

2014-10-14 Alexandre Lara

następujący kod działa dla mnie

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div class="col-md-12" style="margin: 0 auto;"> 
     <section class="panel"> 
      <header class="panel-heading tab-bg-dark-navy-blue"> 
       <ul class="nav nav-tabs nav-justified "> 
        <li class="active"> 
         <a data-toggle="tab" href="#overview"> 
          {% trans "Overview" %} 
         </a> 
        </li> 
        <li class=""> 
         <a data-toggle="tab" href="#timeline"> 
          {% trans "Timeline" %} 
         </a> 
        </li> 
        <li class=""> 
         <a data-toggle="tab" href="#users_rating"> 
          {% trans "Users Ratings" %} ({{ ptc.userrating.count }}) 
         </a> 
        </li> 
        <li class=""> 
         <a data-toggle="tab" href="#rating"> 
          {% trans "Our Rating" %} 
         </a> 
        </li> 
       </ul> 
      </header> 
      <div class="panel-body"> 
       <div class="tab-content tasi-tab"> 


        <!-- Overview Tab-Pane --> 
        <div id="overview" class="tab-pane active"> 
         {% include 'overview.html' %} 
        </div> 

        <!-- Timeline Tab-Pane --> 

        <div id="timeline" class="tab-pane"> 
         {% include 'timeline.html' %} 
        </div> 

        <!-- User Rating Tab-Pane --> 

        <div id="users_rating" class="tab-pane"> 
         {% include 'users_rating.html' %} 
        </div> 

        <!-- Our Rating Tab-Pane --> 

        <div id="rating" class="tab-pane"> 
         {% include 'rating.html' %} 
        </div> 
       </div> 
      </div> 

     </section> 
    </div> 
</body> 
</html>

<script type="text/javascript"> 
     $(function() { 
      // Javascript to enable link to tab 
      var hash = document.location.hash; 
      if (hash) { 
      console.log(hash); 
      $('.nav-tabs a[href='+hash+']').tab('show'); 
      } 

      // Change hash for page-reload 
      $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
      window.location.hash = e.target.hash; 
      }); 
     }); 
    </script>

Źródło

2014-10-14 07:39:26

Twoje rozwiązanie działa, dziękuję. Po tym czasie odkryłem, że moje rozwiązanie działa, problem polegał na tym, że zapomniałem umieścić '' na czele mojego szablonu, więc kiedy mówiąc, problem został rozwiązany. –

To mi się udało, z wyjątkiem tego, że musiałem zmodyfikować cytowanie, aby osadzić podwójne cudzysłowy wokół wartości skrótu w wierszu, który pokazuje kartę: '$ ('. Nav-tabs a [href ="' + hash + ""] ') .tab (' show '); ' – KenB

Link do określonej zakładki Bootstrap

Odpowiedz

Powiązane problemy