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) :
Related
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>
I have seen some questions similar to this one but I haven't come across an answer that would help. Can anyone please have a look at my code?
I have {{$ctrl.init}} and {{$ctrl.people}} assigned in the component. I know this assignment works because if I take away the "split-button" and just print them on the template directly, I can click on them and they redirect normally, with no problem.
This is the code in my template:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
<div class="btn-group btn-xs" uib-dropdown ng-cloak>
<button id="mydd" type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown" aria-haspopup="true">Action
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="mydd">
<li>Start</li>
<li>People</li>
</ul>
</div>
</div>
</div>
</div>
When I add the button, I get the proper styling but it doesn't drop down or show me the options. There is no reaction.
Any thoughts?
Try this.
you should add ui.bootstrap module to main app .
in controller define $scope.isCollapsed = true;
and also add uib-collapse="isCollapsed" directive to ul tag
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
<div class="btn-group btn-xs" uib-dropdown ng-cloak>
<button id="mydd" type="button" ng-click="isCollapsed = !isCollapsed" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown" aria-haspopup="true">Action
<span class="caret"></span></button>
<ul class="dropdown-menu" uib-collapse="isCollapsed" role="menu" aria-labelledby="mydd">
<li>Start</li>
<li>People</li>
</ul>
</div>
</div>
</div>
</div>
I have a toolbar with 3 buttons. and one of them has a dropdown.
the html is the following:
<div id="primary-section" class="wrapper wrapper-content">
<div class="row" id="create-container">
<div class="col-lg-12">
<div class="ibox float-e-margins animated fadeInRight">
<div class="ibox-title" style="height: 60px;">
<div class="btn-group">
<button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"><i class="fa fa-plus"></i> New Container</button>
</div>
<div class="btn-group">
<button type="button" id="btn-connect" class="btn btn-success" disabled="disabled">Connect</button>
</div>
<div class="btn-group" id="actions" style="margin-right:16px;">
<button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>Start</a></li>
<li><a>Stop</a></li>
<li><a>Pause</a></li>
<li><a>Resume</a></li>
<li><a>Delete</a></li>
<li class="divider"></li>
<li><a id="inspect">Inspect</a></li>
<li><a id="console">Console</a></li>
<li><a>Clone</a></li>
</ul>
</div>
</div>
<div class="ibox-content">
<div id="loading-grid">
<img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/>
<h3>Loading containers...</h3>
</div>
<div id="grid" class="hidden"></div>
</div>
</div>
</div>
</div>
</div>
Now for some reason the html that results out of this is the following.
The create button ends up inside of the connect button. and i can't for the life of me figure out what the hell is going on. it looks like i closed all tags and quotes.
parsed HTML:
<div id="primary-section" class="wrapper wrapper-content">
<div class="row" id="create-container">
<div class="col-lg-12">
<div class="ibox float-e-margins animated fadeInRight">
<div class="ibox-title" style="height: 60px;">
<div class="btn-group">
</div>
<div class="btn-group">
<button type="button" id="btn-connect" class="btn btn-success" disabled="disabled"><button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"><i class="fa fa-plus"></i> New Container</button>Connect</button>
</div>
<div class="btn-group" id="actions" style="margin-right:16px;">
<button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>Start</a></li>
<li><a>Stop</a></li>
<li><a>Pause</a></li>
<li><a>Resume</a></li>
<li><a>Delete</a></li>
<li class="divider"></li>
<li><a id="inspect">Inspect</a></li>
<li><a id="console">Console</a></li>
<li><a>Clone</a></li>
</ul>
</div>
</div>
<div class="ibox-content">
<div id="loading-grid">
<img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/>
<h3>Loading containers...</h3>
</div>
<div id="grid" class="hidden"></div>
</div>
</div>
</div>
</div>
</div>
Ok so kids, next time you post to SO remember, first check the javascript.
I was prepending the button on the element id of the connect button.
Thanks folks!
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
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>