Collegamento a scheda specifica Bootstrap

Sto sviluppando un sito con Django Framework e sto cercando di creare un modo per quando un utente accede a un collegamento come http://www.example.com/site/#users_rating apre una scheda specifica nella pagina.Collegamento a scheda specifica Bootstrap

Ho provato il seguente codice che ho trovato su internet (io sono nuovo in JavaScript/JQuery), non funziona:

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

mio modello utilizza BootStrap 3, ecco il codice HTML (con alcuni tag 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>

Come posso aprire una scheda specifica in base a un URL nel mio sito?

fonte

2014-10-14 Alexandre Lara

Seguendo codice funziona per me

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>

fonte

2014-10-14 07:39:26

La soluzione funziona, grazie. Ho scoperto dopo che anche la mia soluzione funziona, il problema è che ho dimenticato di mettere '' alla testa del mio modello, così quando ho mettilo, il problema è stato risolto. –

Questo ha funzionato bene per me, tranne che ho dovuto modificare il quoting per incorporare le doppie virgolette attorno al valore hash sulla riga che mostra la scheda: '$ ('. Nav-tabs a [href ="' + hash + '"] ') .tab (' show '); ' – KenB

Collegamento a scheda specifica Bootstrap

risposta

Problemi correlati