We Keep Coding

How do I get link in bootstrap tabs

i want in this tabs code get the link for tabs directly
like this ex : domainname.com/index.php#tab3
any idea for get the url tabs because i want to use in form ...
How do I get link in bootstrap tabs
code directly : http://www.bootply.com/D4A2AglssW#3
<div class="container" id="myWizard">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="step1">
<p>Here is the content for the first step...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step2">
<p>Here is the content for step 2...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step3">
<p>Here is the content for step 3...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step4">
<p>Here is the content for step 4...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step5">
<p>This is the last step. You're done.</p>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
</div>
Javascript
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
$('.first').click(function(){
$('#myWizard a:first').tab('show')
})

use this
$(".nav-pills>li>a").click(function(){
alert($(this).attr("href"));
});

You can easily get control over you tabs by following function. Define a global variable and whenever tab is shown, append the tab name in current url:
var url = window.location.href;
var url_withtab = ""; //you can easily access current tab url on this variable whenever needed.
$("body").on("shown.bs.tab", "#step1", function() {
//code to do after displaying step2 tab.
url_withtab = url+"#step1";
});
$("body").on("shown.bs.tab", "#step2", function() {
//code to do after displaying step2 tab.
url_withtab = url+"#step2";
});
$("body").on("shown.bs.tab", "#step3", function() {
//code to do after displaying step2 tab.
url_withtab = url+"#step3";
});
Update: here is a quick work around, and I hope it will work for you.
<div class="container" id="myWizard">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active"><a onclick="setCurrentTabUrl('#step1')" href="#step1" data-toggle="tab">Step 1</a></li>
<li><a onclick="setCurrentTabUrl('#step2')" href="#step2" data-toggle="tab">Step 2</a></li>
<li><a onclick="setCurrentTabUrl('#step3')" href="#step3" data-toggle="tab">Step 3</a></li>
<li><a onclick="setCurrentTabUrl('#step4')" href="#step4" data-toggle="tab">Step 4</a></li>
<li><a onclick="setCurrentTabUrl('#step5')" href="#step5" data-toggle="tab">Step 5</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="step1">
<p>Here is the content for the first step...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step2">
<p>Here is the content for step 2...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step3">
<p>Here is the content for step 3...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step4">
<p>Here is the content for step 4...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step5">
<p>This is the last step. You're done.</p>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
</div>
<script>
var url = window.location.href;
var url_tab = "#step1"; //initially setting current tab to step1.
function setCurrentTabUrl(tab){
url_tab = url+tab;
console.log(url_tab);
}
//now url_tab will contain current tab url.
</script>
Update 2 (more effective):
<script>
var url_tab = window.location.href+"#step1"; //initially store your first tab name since below code only execute after clicking on a tab, and first tab url will empty if not set.
$('.nav-pills a').on('show.bs.tab', function(e){
url_tab = this.href;
console.log(this.href);
});
//url_tab contain current url of tab.
</script>
If doesnot work, try using src via url:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Getting two bootstrap tabs to work on a single page and accessing the active tab on submit

I have two bootstrap tab components on my page
The first one has two tabs and the second one has three.
The simplified code is as below..
<div class="col-md-12">
<ul id="tab1" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab A</li>
<li role="presentation">Tab B</li>
</ul>
<div id="tab1content" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="taba">
Tab A
</div>
<div role="tabpanel" class="tab-pane" id="tabb">
Tab B
</div>
</div>
</div>
<div class="col-md-12">
<ul id="tab2" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab X</li>
<li role="presentation">Tab Y</li>
<li role="presentation">Tab Z</li>
</ul>
<div id="tab2content" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tabx">
Tab X
</div>
<div role="tabpanel" class="tab-pane" id="taby">
Tab Y
</div>
<div role="tabpanel" class="tab-pane" id="tabz">
Tab Z
</div>
</div>
</div>
<input type="submit" value="Submit" class="btnspl" style="max-width:100%" />
On submit button press I need to find out the active tab in both the components of the page.
I found this code in bootstrap site.. but it is for a single tab..
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
What changes would be needed when there are two bootstrap tab components.
jsfiddle(not working) : http://jsfiddle.net/52VtD/13447/
Any help is sincerely appreciated
Thanks

If I'm understanding it right you need to know which tab is active in both the components when "submit" button is correct. To get it you can use following code in button's click handler:
var x=$("#tab1content div.active").prop("id");
var y=$("#tab2content div.active").prop("id");
$("#log").text("TAB 1: "+ x +"\r\nTAB 2: "+ y);
x and y contains the id of selected/active tab in respective tab components. Here is working fiddle.

For getting the currently active tab you can check within click event of submit button hasClass(".active").attr("id").
The second tab container id is same as the first tab container id.

Bootstrap tabs - point two tabs same time

I've got bootstrap tab with following code:
Fiddle
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" onclick="location.href='#home1'">Home</a></li>
<li><a data-toggle="tab" href="#menu1" onclick="location.href='#menu11'">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
<hr />
<div class="tab-content">
<div id="home1" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu11" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
and JS
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
how to make it work in that way, after clicking one link - content of two DIVS will be changes? i was looking for info how to point not the ID but class, so far without sucess.

I created a jsfiddle http://jsfiddle.net/an0r4buk/1/ to showcase what you're trying to achieve.
$('.nav-tabs a').click(function () {
$(this).tab('show');
$("<a>").data("target", $(this).data("second-tab")).tab("show")
})
Bootstrap toggles one tab at a time, that's why I create a new anchor element and set it's target to the second tab you want to show.
I modified your HTML like this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" data-second-tab="#home1">Home</a>
</li>
<li><a data-toggle="tab" href="#menu1" data-second-tab="#menu11">Menu 1</a>
</li>
</ul>
The href attribute is used for the first tab (home/home1), the data-second-tab toggles the second tab.

try this http://jsfiddle.net/serGlazkov/an0r4buk/2/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var $previousActiveTab = $(e.relatedTarget);
var $newlyActiveTab = $(e.target);
var other = $previousActiveTab.attr('href') + '1';
var other1 = $newlyActiveTab.attr('href') + '1';
$(other).removeClass('active in');
$(other1).addClass('active in');
})

Mark your second div.tab-content with id="tab-content2" then the following code will do the trick:
$('.nav-tabs a').click(function(){
$(this).tab('show')
var name = $(this).attr('href').substr(1)
$('#tab-content2').children().each(function(el) {
if (name + '1' === $(this).attr('id')) {
$(this).addClass('active')
} else {
$(this).removeClass('active')
}
})
})

Bootstrap Skip to Next Visible Tab

I have created a "Next" button in Bootstrap tab panel, which skips to the next tab in the sequence, however I want it to skip to the next visible tab i.e. where the li tag does not have the class "hide".
The original code I took from Bootstrap Tabs: Next & Previous Buttons for Forms and adapted as follows:
<ul class="nav nav-tabs">
<li class="active">Products
</li>
<li>Sizes
</li>
<li>Quantities
</li>
<li class="hide">Shipping
</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>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab4">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab5">
<a class="btn btn-danger btnClose">Close</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.btnNext').click(function() {
$('.nav-tabs > .active').next('li').not(".hide").find('a').trigger('click');
});
});
</script>
Fiddle: http://jsfiddle.net/tyLje3jz/
As you will see I included "not(".hide")".
This is not working quite as expected, as it will go as far as #tab3 but the button on #tab3 does nothing when what I want it to do is skip to #tab5 as #tab4 has the "hide" class.
From my understanding, ".next('li').not('.hide')" should seek out the next "li" tag without the hide class, which in this case is #tab5.
What am I doing wrong?

First, you'll need to use the class .btnNext not the id #btnNext in your click handler.
Based on the question trying to get next item not having a specific class, you can do it like this:
$('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');
The problem is that .next() will grab a single element and .not() will remove any item in the collection that matches the criteria. So right before the hidden tab, your code would only grab the hidden tab and then immediately rule it out. Instead, what you need to do is find all matching items, rule out any hidden ones, and then pick the first.
Demo in Stack Snippets
$(function() {
$('.btnNext').click(function() {
$('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');
});
});
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">Products</li>
<li>Sizes</li>
<li>Quantities</li>
<li class="hide">Shipping</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>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab4">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab5">
<a class="btn btn-danger btnClose">Close</a>
</div>
</div>

bootstrap pill not "tabbing" content

I am setting up bootstrap pills on a page and am using the http://getbootstrap.com/javascript/#tabs-usage standard formula but I'm getting the function is not a valid function error message. I have:
<ul class="nav nav-pills" role="pilllist" id="myPill">
<li role="presentation" class="active">Show all</li>
<li role="presentation">Cars</li>
</ul>
<div class="pill-content">
<div role="pillbpanel" class="pill-pane active" id="all">Sample of all</div>
<div role="pillpanel" class="pill-pane" id="car">Sample for car</div>
</div>
<script>
$(function () {
$('#myPill a:last').pill('show')
})
</script>
Why am I getting this error message?

You're using .pills('show'); where you should be using .tab('show'); as seen below:
$(function () {
$('#myPill a:last').tab('show')
});
Also, your HTML is incorrect for pills:
<ul class="nav nav-pills" role="tablist" id="myPill">
<li role="presentation" class="active">Show All</li>
<li role="presentation">Cars</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="all">Sample of All</div>
<div role="tabpanel" class="tab-pane" id="cars">Sample for Cars</div>
</div>
Basically, the only mentions of pill you should have is your ID (as its name doesn't matter) and .nav-pills. Everything else should be tab, ie tabpanel, .tab-pane, etc.
Lastly, the reason you're getting an undefined function error is that .pills() isn't a fucntion.
Take a look at this Bootply to see how the tabs work.