Develop Reference

Change bootstrap tabs when coming from another page

I have a page with topics set in a bootstrap tabbed panel.
I want to have links to the topics from another page.
Is it possible when I click to a button when I go to the tabbed page the active tab to change automatically?
i.e. on page2.html to click a link and go to tab2 or tab3 on page1.html
<!-- tabs -->
<div id="helptabs">
<!-- tab pills -->
<div class="wrap clearfix">
<div class="container" id="fpills">
<div class="row">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">Topic 1</li><li
role="presentation">Topic 2</li><li
role="presentation">Topic 3</li>
</ul>
</div>
</div>
</div>
<!-- tab pills END -->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">Topic 1 comes here</div>
<div role="tabpanel" class="tab-pane" id="tab2">Topic 2 comes here</div>
<div role="tabpanel" class="tab-pane" id="tab3">Topic 3 comes here</div>
</div>
<!-- tab panes END -->
</div>
<!-- tabs -->
And on the other page it should be
Topic1
Topic2
Topic3

The answer you are looking for is probably here, take a look.
Bootstrap tabs opening tabs on another page

Bootstrap tabs aren't working with AngularJS routes. 'data-target' isn't working too

I got this code from the Bootswatch website, it supposed to work just fine :
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="">Profile</li>
<li class="">Other</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>Tab home!</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Tab Profile!</p>
</div>
<div class="tab-pane fade" id="other">
<p>Tab Other!</p>
</div>
</div>
But I'm using AngularJS routes, so the href links aren't working, I tried to replace href with data-target, but it doesn't work either. Please help, and is there a simple way to change the Tab class to active while active? Thank you.

You'll want to look into using Angular-UI for Bootstrap components like this. It gives you Bootstrap components like tabs that have been written specifically for AngularJS applications. Check out the "Tabs" section on that link.

Bootstrap 3.0: nav-tabs not switching

i'm using bootstrap 3 nav-tabs like this
<ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;">
<li class="active"><a role="tab" data-toggle="tab" href="#progress">In Progress</a></li>
<li><a role="tab" data-toggle="tab" href="#done">Done</a></li>
</ul>
<div class="tab-content">
<div id="progress" class="tab-pane fade active in">
content for progress
</div>
<div id="done" class="tab-pane fade">
content for done
</div>
</div>
these are js files i've
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
when page loads tabs are working fine but when i click second tab and want to come back to first one that does not switch , whats wrong with my code here pleas help

switch the JavaScript files
Jquery to come first and then bootstrap

Bootstrap 3: Setting a default nav option with dropdowns

I have a Bootstrap 3 page that displays a set of tabs containing dropdowns. This looks great, but I would like to have one of the tabs be open by default when the page loads. Currently, the first tab option is set to "active", but the contents of that tab are not displayed.
How do I make the contents of a particular bootstrap dropdown choice display when the page is loaded?
Here's the code: fiddle
<ul class="nav nav-tabs">
<li class="dropdown active"> First Tab <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="firstTab">
<li class="active">
One
</li>
<li>
Two
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="one">Selected Tab: One (Should be open/active by default)</div>
<div class="tab-pane fade" id="two">Selected Tab: Two</div>
</div>

To solve your problem just give your first tab the class "tab-pane active" instead of "tab-pane fade" and you are good to go.

How to have top and bottom tabs for bootstrap tab work in tandom

I am applying bootstrap tab to my web page. The challenge here is that I have tabs on top and bottom of the tab content.
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-top">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-bottom">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
I want the bottom tabs to change accordingly when I click on the top once and visa-versa.
The tab content is changing but the two tabs - top and bottom need to change in tandom i.e when i click on "Profile" on top - it needs to make "Profile" in bottom active
I have tried searching for some solutions using data-target but with no success. I am guessing that javascript or jquery might be needed.
Any suggestion or tips will be appreciated.
Thanks

Try this:
$('.nav-tabs-top a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-bottom li.active').removeClass('active')
$('.nav-tabs-bottom a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
$('.nav-tabs-bottom a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-top li.active').removeClass('active')
$('.nav-tabs-top a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
Result here
Code here

Here's a version that works in Bootstrap 4 (the class "active" is applied to the <a> element, not the <li> element). This version also automatically creates the bottom tabs for you: https://gist.github.com/epicfaace/fa31d5133d3dd89b7f0caf72ebba5af9