विशिष्ट टैब से लिंक बूटस्ट्रैप

मैं Django फ्रेमवर्क के साथ एक साइट विकसित कर रहा हूं और मैं http://www.example.com/site/#users_rating जैसे लिंक तक पहुंचने के लिए एक तरीका बनाने का प्रयास कर रहा हूं, यह पृष्ठ में एक विशिष्ट टैब खोलता है।विशिष्ट टैब से लिंक बूटस्ट्रैप

मैं निम्नलिखित कोड है कि मैं इंटरनेट पर पाया (मैं जावास्क्रिप्ट/JQuery में नए कर रहा हूँ), यह काम नहीं कर रहा करने की कोशिश की:

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

मेरे टेम्पलेट बूटस्ट्रैप 3 का उपयोग करता है, तो यह HTML कोड है (कुछ 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>

मैं अपनी साइट में किसी यूआरएल के अनुसार एक विशिष्ट टैब कैसे खोल सकता हूं?

स्रोत

2014-10-14 Alexandre Lara

के बाद कोड के लिए मुझे

एचटीएमएल

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

स्रोत

2014-10-14 07:39:26

आपका समाधान काम करता है काम करता है, धन्यवाद। मैंने पाया कि मेरा समाधान भी काम करता है, समस्या यह है कि मैं अपने टेम्पलेट के सिर पर '' डालना भूल गया, इसलिए जब मैं इसे रखो, समस्या हल हो गई थी। –

यह मेरे लिए अच्छी तरह से काम करता है, सिवाय इसके कि मुझे उस रेखा पर हैश वैल्यू के चारों ओर डबल कोट्स एम्बेड करने के लिए उद्धरण को संशोधित करना था जो टैब दिखाता है: '$ ('। एनवी-टैब एक [href ="' हैश + '"] ') .tab (' शो '); ' – KenB

विशिष्ट टैब से लिंक बूटस्ट्रैप

उत्तर

संबंधित मुद्दे