Bootstrap选项卡不活动也不显示内容

Question

我正在个人网站上工作，我正在遇到一个引导错误。这似乎很常见，我似乎无法用我读过的任何东西来修复它。我有以下代码，任何帮助都是，嗯......很有帮助。

$(document).ready(function() {
  "use strict";
  activaTab('about');
});

function activaTab(tab) {
  "use strict";
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
}

<div class="tabs">
  <nav>
    <ul class="nav nav-tabs nav-justified">
      <li class="active"><a data-toggle="tab" href="#about">About</a>
      </li>
      <li><a data-toggle="tab" href="#work">Work</a>
      </li>
      <li><a data-toggle="tab" href="#school">School</a>
      </li>
      <li><a data-toggle="tab" href="#nifty">Other Nifty Items</a>
      </li>
    </ul>
  </nav>
  <div class="tab-content" id="tabs">
    <div id="about" class="tab-pane fade in active">
      le content
    </div>
    <div id="work" class="tab-pane fade">
      le content
    </div>
    <div id="school" class="tab-pane fade">
      le content
    </div>
    <div id="nifty" class="tab-pane fade">
      le content
    </div>
  </div>