JQuery, Bootstrap navs - как добавить предыдущие/следующие кнопки?

Question

Я использую bootstrap navs для своей страницы, и я хочу добавить следующие и предыдущие кнопки в содержимое моей вкладки.

HTML

<ul class="nav nav-tabs nav-justified"> 
    <li class="active"><a href="#overview">Overview</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#randomtab">Randomtab</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="overview" class="tab-pane fade in active"> 

    <a href="#contact" class="btn btn-info pull-right">Next</a> 

    </div> 
    <div id="contact" class="tab-pane fade in active"> 
    </div> 
    <div id="randomtab" class="tab-pane fade in active"> 
    </div> 
</div> 

Javascript

$(document).ready(function() { 
    $(".nav-tabs a").click(function() { 
    $(this).tab('show'); 
    }); 
    $('.nav-tabs a').on('shown.bs.tab', function(event) { 
    var x = $(event.target).text(); // active tab 
    var y = $(event.relatedTarget).text(); // previous tab 
    $(".act span").text(x); 
    $(".prev span").text(y); 
    }); 
}); 

Я пытался добавить этот код JavaScript, но я не знаю, как писать a[href=(this).href]

$(".tab-pane a").click(function() { 
    $('a[href="(this.href)"]').tab('show'); //this row is wrong 
}); 
$('.tab-pane a').on('shown.bs.tab', function(event) { 
    var x = $(event.target).text(); // active tab 
    var y = $(event.relatedTarget).text(); // previous tab 
    $(".act span").text(x); 
    $(".prev span").text(y); 
}); 

Это мое решение, может быть, есть лучшее, но я не знаю ... Спасибо.

PS: Пожалуйста, оставьте комментарий ниже, если вы не понимаете мой вопрос, поэтому я могу отредактировать этот пост.

EDIT

Это рабочий раствор для начальной загрузки NAVS:

благодаря Arun P Johny

<ul class="nav nav-tabs nav-justified"> 
    <li class="active"><a href="#overview">Overview</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#randomtab">Randomtab</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="overview" class="tab-pane fade in active"> 

    <a href="#contact" class="btn btn-info pull-right">Next</a> 

    </div> 
    <div id="contact" class="tab-pane fade in active"> 

    <a href="#overview" class="btn btn-info pull-left">Prev</a> 

    <a href="#randomtab" class="btn btn-info pull-right">Next</a> 

    </div> 
    <div id="randomtab" class="tab-pane fade in active"> 

    <a href="#contact" class="btn btn-info pull-left">Prev</a> 

    </div> 
</div> 

$(document).ready(function() { 
    $(".nav-tabs a").click(function() { 
    $(this).tab('show'); 
    }); 
    $('.nav-tabs a').on('shown.bs.tab', function(event) { 
    var x = $(event.target).text(); // active tab 
    var y = $(event.relatedTarget).text(); // previous tab 
    $(".act span").text(x); 
    $(".prev span").text(y); 
    }); 
    $(".tab-pane a").click(function() { 
    $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }); 
    $('.nav-tabs a').on('shown.bs.tab', function(event) { 
    var x = $(event.target).text(); // active tab 
    var y = $(event.relatedTarget).text(); // previous tab 
    $(".act span").text(x); 
    $(".prev span").text(y); 
    }); 
}); 

Answer 1

Я думаю, что проблема href свойство будет иметь поэтому попробуйте

$('a[href="'+ $(this).attr('href')+'"]').tab('show');