Ativação da guia Bootstrap com o JQuery

eu tenho o seguinte código

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

E o seguinte script

$(document).ready(function(){
    activaTab('aaa');
});

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

Nesse caso, quando a página estiver pronta, a segunda guia será ativada, mas sempre receberei um erro de JavaScript na linha$('.tab-pane a[href="#' + tab + '"]').tab();

Alguém pode me ajudar por favor?

questionAnswers(6)

yourAnswerToTheQuestion