Bootstrap Tabs: Next & Previous Buttons for Forms - javascript

I am trying to (eventually) split a form over several Bootstrap 3.x tabs, but I am having trouble with the previous and next buttons. Only the first next button functions and sometimes the tab content doesn't change at all between tabs when the tabs are manually clicked OR using the buttons.
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary" id="btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary" id="btnNext">Next</a>
<a class="btn btn-primary" id="btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary" id="btnPrevious">Previous</a>
</div>
</div>
<script>
$('#btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('#btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>


First at All : ID MUST BE UNIQUE
Here is your working code : http://www.bootply.com/120472
HTML :
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext" >Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
</div>
JS :
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
Snippet:
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext" >Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
</div>


For bootstrap 4
<button class="btn btn-info btn-lg previous">Previous</button>
<button class="btn btn-info btn-lg next">Next</button>
$('.next').click(function () {
$('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});
$('.previous').click(function () {
$('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});


Anyone who want to perform next previous operations on tab, follow following steps:
a) Put next prev buttons in each tab-panel
b) Bind the buttons clicks to body so that it will be called on click
c) On click trigger click of next/prev tab
d) If it is last tab redirect user to appropriate tab (Call show events of first or last tab)
/**** JQuery *******/
jQuery('body').on('click','.next-tab', function(){
var next = jQuery('.nav-tabs > .active').next('li');
if(next.length){
next.find('a').trigger('click');
}else{
jQuery('#myTabs a:first').tab('show');
}
});
jQuery('body').on('click','.previous-tab', function(){
var prev = jQuery('.nav-tabs > .active').prev('li')
if(prev.length){
prev.find('a').trigger('click');
}else{
jQuery('#myTabs a:last').tab('show');
}
});
/******* CSS *********/
.previous-tab,
.next-tab{
display: inline-block;
border: 1px solid #444348;
border-radius: 3px;
margin: 5px;
color: #444348;
font-size: 14px;
padding: 10px 15px;
cursor: pointer;
}
<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active">Step1</li>
<li role="presentation">Step2</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="step1">
<p>tab1 content</p>
<p>//Include next prev buttons in the tab-content</p>
<span class="previous-tab">previous</span>
<span class="next-tab">next</span>
</div>
<div role="tabpanel" class="tab-pane" id="step2">
<p>tab2 content</p>
<p>//Include next prev buttons in the tab-content</p>
<span class="previous-tab">previous</span>
<span class="next-tab">next</span>
</div>
</div>

Related

how to create nav-tabs next botton validation in jquery i have to validate specific field

I am new to js I have simplest code specific field validation in nav-tabs next button for implement.
<ul class="nav nav-tabs"><li class="active">Shipping</li>`<li>Quantities</li> <li>Summary</li></ul>
<div class="tab-content"><div class="tab-pane active" id="tab1"> <a class="btn btn-primary" id="btnNext">Next</a></div><div class="tab-pane" id="tab2"><a class="btn btn-primary" id="btnNext">Next</a><a class="btn btn-primary" id="btnPrevious">Previous</a></div><div class="tab-pane" id="tab2"><a class="btn btn-primary" id="btnPrevious">Previous</a></div></div>
<script>
$('#btnNext').click(function(){$('.nav-tabs > .active').next('li').find('a').trigger('click');
});$('#btnPrevious').click(function(){$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

There are a few mistakes here. Div tab-pane 3 should have id='tab3' instead of tab2. Also elements must have unique ids. So the previous and next buttons cannot have same ids. Instead of id, use class to navigate via buttons using jquery like this -
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"><a class="btn btn-primary btnNext">Next</a></div>
<div class="tab-pane" id="tab2"><a class="btn btn-primary btnNext">Next</a><a class="btn btn-primary btnPrevious">Previous</a></div>
<div class="tab-pane" id="tab3"><a class="btn btn-primary btnPrevious">Previous</a></div>
</div>
<script>
$('.btnNext').click(function(){$('.nav-tabs > .active').next('li').find('a').trigger('click');
});$('.btnPrevious').click(function(){$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

Trying to choose two different start points on a multicarousel page with jquery

I am trying to pick two different start points for the slide content. The setSlideContent indicator is set to 17 for the main gallery. But for the modal that will popup if there is alternate variations of that image will start at 0. Is there a way to start the slide content at 17 for main gallery carousel, but if it is a modal carousel, have it start at 0? I'm guessing I need an if/else here.
Would (using the original script) changing the setSlideContent to check if $carouselSelector contains .modal return setSlideSelector(0) else if $carouselSelector does not contain .modal return setSlideSelector(17) or whatever number I need work? Still extremely new to this.
NOTE in the example below the setSlideContent is set to 0 but but it is never set to 0 in practice (unless the carousel is in a modal) to take into account new slides being added. The number will always be the last slide added in my case it is 17.
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel');
var $carouselText = $carouselContainer.find('.carousel-text');
var $carouselSelector = $carouselContainer.find('.carousel-selector');
$carousel.carousel({
interval: false
});
function setSlideContent(id) {
var targetContent = $carouselContainer.find('.slide-content[data-slide="' +
id +
'"]').html();
$carouselText.html(targetContent);
}
setSlideContent(0);
$carouselSelector.on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
$carousel.on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
setSlideContent(targetSlide);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-0">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-0" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-0" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<h5>Slide 1</h5>
<button class="btn btn-outline-dark btn-sm" data-toggle="modal" data-target="#modal1" type="button" style="margin-left: -1px;">press me</button>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Slide 2</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-1">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<!-- change this id and match with that in JS -->
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<!-- change this id and match with that in the JS -->
<h5>Dreams of Avarice1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Avarice Zero1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>...</h3>
</div>
<div class="modal-body">
<div class="container-fluid carousel-container">
<div class="container">
<div class="row mx-auto">
<div class="col">
<div class="carousel slide carousel-fade" id="carousel-...">
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
<div class="carousel-item" data-slide-number="1">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="row mx-auto">
<div class="col carousel-text"></div>
<div style="display: none;">
<div class="slide-content" data-slide="0">
<h5>0ne</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<h5>two</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row mx-auto">
<div class="col">
<a class="carousel-selector" data-slide="0"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

If I understand correctly, you want :
to initialize the modal carousel at its first slide, with corresponding caption.
to initialize all other carousels at their last slide, with corresponding caption.
At least, that would makes sense.
If I'm right, then the javascript will be something like this :
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel').on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
var targetContent = $carouselContainer.find('.slide-content[data-slide="' + targetSlide + '"]').html();
$carouselContainer.find('.carousel-text').html(targetContent);
}).carousel({
interval: false
});
$carouselContainer.find('.carousel-selector').on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
// The carousel is already at first slide (slide 0).
var n = $carouselContainer.find(".slide-content").length; // number of slides in this carousel
if (n < 2 || $carouselContainer.closest(".modal").length > 0) { // if there are less than 2 slides, or the carousel is in a .modal container
// Trigger the 'slid.bs.carousel' event so its handler can look after the .carousel-text ...
$carousel.trigger('slid.bs.carousel');
} else { // ... else, there are 2 or more slides and this is a non-modal carousel:
// send to last slide
$carousel.carousel(n - 1);
$carousel.trigger('slid.bs.carousel'); // shouldn't be necessary but has been found to be a workaround for `slid.bs.carousel` not being triggered automatically under some (undiagnosed) circumstances.
}
});
});
Demo

How to create a link that actives a Bootstrap Tab

I have some tabs set up in accordance with the examples here. So show/hiding divs:
http://getbootstrap.com/javascript/#tabs
But I want a <button> inside all the the DIVs which acts as a NEXT button to the following tab. I tried the following which half works, but it does not deal with the updating of the active classes on the tabs at the top:
<button type="button" class="btn btn-lg btn-primary" data-toggle="tab" href="#tab-second">Next</button>
Can it be done?

Using Zakaria's answer I actually figured out a better solution.
Set an ID on each tab link like so:
<li><a data-toggle="tab" href="#tab-second" id="tab-second-link">Second Tab</a></li>
Then add an onclick event to any link:
<a class="btn btn-lg btn-primary" href="#" onclick="javascript: $('#tab-second-link').tab('show');";>Next</a>

Working fiddle
Check this basic example using data-* attributes :
$("button[data-tab-destination]").on('click', function() {
var tab = $(this).data('tab-destination');
$("#"+tab).click();
});
Hope this helps.
$("button[data-tab-destination]").on('click', function() {
var tab = $(this).data('tab-destination');
$("#"+tab).click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active">TAB #1</li>
<li>TAB #2</li>
<li>TAB #3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">
<button type="button" class="btn btn-lg btn-primary" data-toggle="tab" data-tab-destination="tab-2">Next</button>
</div>
<div class="tab-pane" id="two"><button type="button" class="btn btn-lg btn-primary" data-toggle="tab" data-tab-destination="tab-3">Next</button>
</div>
<div class="tab-pane" id="three">
</div>
</div>
</div>
</div>
</div>

try this code (add bootstrap.js and jquery.js)
<div class="row">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
//CONTENT OF TAB1
<div style="float: left;">
<a style="margin-left:5px;" class="btn btn-set btn-default" href="#tab2" data-toggle="tab"> MOVE TO TAB2</a>
</div>
</div>
<div class="tab-pane" id="tab2">
//CONTENT OF TAB2
<div style="float: left;">
<a class="btn btn-set btn-primary" href="#tab1" data-toggle="tab">MOVE TO TAB1</a></div>
</div>
</div>
example of using it to move between login and (s'inscrire) :

Bootstrap Tabpanel Next Previous Buttons

I have a Tab Panel and it has long content so it would be better for the user to have next and previous buttons.
but they aren't working.
This is aspx code :
<div class="col_4">
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs nav-tabs1" role="tablist">
<li role="presentation" class="active">About Myself</li>
<li role="presentation">Family Details</li>
<li role="presentation">Partner Preference</li>
<li role="presentation">Contact</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="aboutmyself" aria-labelledby="aboutmyself-tab">
<!--Tab1 content-->
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="familydetails" aria-labelledby="familydetails-tab">
<!--Tab2 content-->
<a class="btn-all btnPrevious" >Previous</a>
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="partnerpreference" aria-labelledby="partnerpreference-tab">
<!--Tab3 content-->
<a class="btn-all btnPrevious" >Previous</a>
<a class="btn-all btnNext" >Next</a>
</div>
<div role="tabpanel" class="tab-pane fade" id="contact" aria-labelledby="contact-tab">
<!--Tab4 content-->
<a class="btn-all btnPrevious" >Previous</a>
</div>
And here is the script.
<script type="text/javascript">
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

Working fiddle
You code works fine you should just put it inside ready function :
$(function(){
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
})
Hope this helps.

Issue on Tabbing Bootstrap 3 Tab Using Button Click

an you please take a look at This Demo and let me know why I am not able to tab bootstrap 3 tabbs by clicking on the the buttons?
Here is the code I have:
<div class="btn-group">
<button class="btn btn-default" id="one">1</button>
<button class="btn btn-default" id="two">2</button>
<button class="btn btn-default" id="three">3</button>
<button class="btn btn-default" id="four">4</button>
</div>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">1 </li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">One</div>
<div class="tab-pane" id="profile">Two</div>
<div class="tab-pane" id="messages">Three</div>
<div class="tab-pane" id="settings">Four</div>
</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$("#one").on("click", function () {
('#myTab a:last').tab('show');
});
</script>
Thanks

Have you included jQuery, Bootstrap CSS and JS?
Edit:
Solution: You forgot the '$' sign, at the front, for jQuery.
$('#myTab a:last').tab('show');
Take a look at the following JS Bin for solution: http://jsbin.com/fenapota/2/edit?html,output

Categories