從同一頁面上的URL鏈接到特定的Twitter Bootstrap選項卡

Question

我是javascript新手，我想知道如何實現此問題的答案？

Twitter Bootstrap選項卡：轉到頁面重新加載或超鏈接上的“特定”選項卡

我想在標簽所位於的同一頁面上使用此代碼。

  <script type="text/javascript">
    // 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
    $('.nav-tabs a').on('shown', function (e) {
      window.location.hash = e.target.hash;
    })
  </script>

我應該在包含標簽的頁面內的哪個位置插入它。

再次，很抱歉成為這樣的菜鳥。

Answer 1

Bootstrap 3解決方案：

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

Answer 2

嘗試將代碼包裝在$(document).ready()函數中

$(document).ready(function() {
 //your code here...
});

您上面的內容將無法正常運行，因為DOM在運行時將無法准備就緒。 使用$(document).ready()函數將延遲執行，直到dom已加載。 它幾乎可以在包含選項卡的頁面中的任何位置。 有些人認為它應該放在head部分，有些人認為它應該放在結尾部分。 但是，請閱讀此處以獲取有關以下內容的更深入的答案： 我將$（document）.ready（）放在哪里？

請參閱： http ://docs.jquery.com/Tutorials: Introducing_ $（document）.ready（）