We Keep Coding

How to open a specific tab when <a> is click on another page and open specific tab on the other page

I have a button in my index page when clicking on that button I need to open a specific tab section of another page. the button is on one page and the tab is on the second page.
I have multiple tabs on the 2nd page but only writing here 1 tabs that one I need to open when is clicked from home page
Page 1 - Where I have a button
<p>View Example Worksheet</p>
Page 2 - tabs exist
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
</li>
<div id="w1" class="container tab-pane fade"><br>
<div class="container">
<div class="row">
<div class="col-12 col-sm-11">
<p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
<p>
</div>
</div>
</div>
</div>

Firstly this is not right way for tabs UI.
But if you want use
<script>
$(document).ready(function(){
$(".btn_readmore2").click(function(){
$("#w1").load("demo_test.txt");
});
});
</script>
other way find function is useful with is visible option you can check.
if($("#w1:visible")){
write you show action code here
}

Getting back to the previous page with particluar bootstrap tab opened

hi I'm currently working on a cordova project. We use cordova and bootstrap mainly.
I'm having two bootstrap tabs.
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"></a></li>
<li><a data-toggle="tab" href="#menu1"></a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane active fade in">
</div>
<div id="menu1" class="tab-pane fade">
add
</div>
</div>
Now in my menu1 tab i'm having this link to add_medication.html. In that i'm having a back button which trigger goBack() as below
function goBack() {
activaTab('menu1');
window.history.go(-1);
alert("in history");
}
function activaTab(tab){
alert("in active");
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
alert("I did it");
}
What I need is to return to the previous page with my menu1 tab opened. All the three alerts are triggered and I'm going back to the previous page. But my activate tab is home tab. How to rectify this???
What am I doing wrong here??

How do I load Bootstrap tab content only when it is active?

I am using Bootstrap tabs to load a widget from a server. What I need is to load the tab content as soon as the user click the tab instead of the initial load of the page. For ex below is the HTML for the page:-
<ul class="nav nav-tabs" role="tablist">
<li class="active">FX</li>
<li>US Bond Futures</li>
<li>US Short Term IR futures</li>
<li>Global Equity Indices</li>
<li>Commodities</li>
<li>Volatility</li>
</ul>
<!-- Tab Content -->
<div class="tab-content">
<!-- FX TAB content -->
<div class="active tab-pane fade in" id="tabs-first">
</div>
</div>
The first tab is referencing to the #tabs-first id and second tab to the #tabs-second. I want to load #tabs-second only when user clicks on that tab not during the initial load of the page.

What kind of content you want to fetch? Use .load(), as you want to target for #tabs-second only, register click handler to that element like so:
$('[href="#tabs-second"]').click(function(){
$('#tabs-second').load('remoteUrl');
// or use callback/complete
$('#tabs-second').load('remoteUrl', function () {
// do something here
});
});

Linking anchor tag on homepage to a particular tab

I have a navigation menu at the top of my webpage with a drop down. For example the service page under nav has a drop down of our other services that go to a service page with a tab structure like so:
<section class="tabs">
<ul class="tab-nav">
<li class="active">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div class="tab-content">
<p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
<p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
<p>Don't forget about me! I'm tab 3!</p>
</div>
</section>
and I would like like to make it so that I could use my achor tags on my home page to link directly to tab 3 or 1 or 2 of my choosing as well as when I refresh the page with the tabs the tab doens't jump to the active tab. How can I do this with javascript? I attempted it with this hash check function bit of code:
$(function () {
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");
$(".tab-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
});
The problem is, is that when I click the second tab, it shows the content on the first tab... but tab 3 looks fine. But when I click on tab 3 and then go back to tab 2, no content displays under tab 2. Maybe someone can simply my code for what I'm trying to accomplish?
ps. I'm using the gumby framework for my tabs

First of all, $($(this).attr('href')) isn't going to find anything, so none of the tabs would be working anyway.
Apart from that, the hash linking code seems to be fine.
I've rewritten the code so that it works now below.
Link: http://jsfiddle.net/s8Ttm/2/
Code:
$(".tab-nav a").bind('click', function (e) {
e.preventDefault();
$(this).parents('li').addClass("active").siblings().removeClass("active");
$('.tab-content').removeClass('active').hide();
console.log($('.tab-content:eq('+$(this).index()+')'));
$('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show();
});
$('.tab-nav a').first().click();
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');

Twitter Bootstrap tab contant wont switch unless directed to page through AJAX

I am using the Bootstrap framework through out the entire site for the responsive design ability. I am also using AJAX calls to switch between every page. On one page I am using the Bootstrap tabs to switch between page contents. Everything works perfectly when you are directed to the page through any of the ajax links but if you manually type in the url the tab contents wont change. The tabs themselves will change when you click on them but the content stays on the original content. I originally though it might have something to do with the javascript I'm using so that you can direct the user to a certain tab with a hashtag but it still doesn't work when I remove the code. Here is the code:
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Tab #1
</div>
<div class="tab-pane" id="tab2">
Tab #2
</div>
<div class="tab-pane" id="tab3">
Tab #3
</div>
<div class="tab-pane" id="tab4">
Tab #4
</div>
</div>
<script>
$(function(){
if (window.location.hash) {
var hash = window.location.hash;
var tab = $('[data-toggle="tab"][href="' + hash + '"]');
tab.show();
tab.tab('show');
}
});
</script>
Can anyone help me with this?

You have to add a listener to the hashchange window event.
You probably opened the page without a hash. At this point, your script was executed. When you change the hash in your adress bar, the page will not be reloaded. So there is no-one to handle that event. For this you have the hashchange event to react to such changes.
See the MDN documentation for more info and examples on this event.
If you are using jQuery, check out this answer.