raold raold - 7 months ago 8
Javascript Question

JQuery, Bootstrap navs - next prev buttons

I am using bootstrap navs for my page and i want to add into my tab content buttons next and prev.

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);
});
});


I tried to add this javascript code but i dont know how to write '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);
});


This is my solution, maybe there is another better but i dont know...Thank you

PS: Please leave comment below if you dont understand my question, so i can edit this post

Answer

I think the problem is href property will have absolute path so try

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

or even

$(this).tab('show');//not tested