Bootstrap Sekme

Question

için harici bağlantı yaratılıyor

Aşağıdaki komut dosyası kullanılırken herhangi bir şey görünmüyor ... ex: http://example.org/folder#First. http://example.org/folder#First tıklandığında, kullanıcı açıldığı zaman bu sekmeye götürmelidir.

<div id="tabmenu_top" class="row"> 
    <div class="row"> 
     <div style="display: table; margin: 0 auto;"> 
      <ul class="nav nav-tabs center-block" id="sync"> 
       <li><a data-toggle="tab" href="/#First">Tab 1</a></li> 
       <li><a data-toggle="tab" href="/#Second">Tab 2</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

$(document).on('[data-toggle="tab"]', function (e) { 
    e.preventDefault() 
    $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
}); 

Answer 1

Sen dom hazır olduğunu ve ileri href s eğik gerekmez gereklidir sekmeyi seçmeniz gerekir. Bu yapıldıktan sonra #First ve #Second döndürecek olan window.location.hash kullanarak url'den hash elde edebilirsiniz. Daha sonra sekmeyi seçmek için sonuç değerini kullanabilirsiniz.

Komple Html:

<div id="tabmenu_top" class="row"> 
    <div class="row"> 
    <div style="display: table; margin: 0 auto;"> 
     <ul class="nav nav-tabs center-block" id="sync"> 
     <li><a data-toggle="tab" href="#First">Tab 1</a></li> 
     <li><a data-toggle="tab" href="#Second">Tab 2</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 
<div class="tab-content"> 
    <div class="tab-pane fade active" id="First"> 
    <h2>Green</h2> 
    <img src="https://placehold.it/350x150/00ff00"/> 
    </div> 
    <div class="tab-pane fade" id="Second"> 
    <h2>Red</h2> 
    <img src="https://placehold.it/350x150/ff0000"/> 
    </div> 
</div> 

jQuery:

bir açıklama

$(function() { 
    //Just for demonstration purposes, I've hard-coded the hash value. 
    var hash = "#Second"; //You would use window.location.hash here 
    if (hash) { 
    $('.nav-tabs a[href="' + hash + '"]').tab('show'); 
    } 
}); 

Fiddle Demo

için yorum bakınız