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.
Related
I use nav-tabs but I have a problem switching between tabs from link which are located inside the contents of tab 1.
I want to switch from tab 1 to tab 3 clickin in this link instead of clicking the tab's title.
I've tried this solution (Under the hood, How to open a tab from external link?) but I get this error: "Uncaught TypeError: $ is not a function".
I'm using jquery 3.5.1 and bootstrap 4.4.1
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="pricing-tab" href="#pricing" data-toggle="tab" role="tab" aria-controls="pricing" aria-selected="true">Pricing</a></li>
<li class="nav-item"><a class="nav-link" id="details-tab" href="#details" data-toggle="tab" role="tab" aria-controls="details" aria-selected="true">Details</a></li>
<li class="nav-item"><a class="nav-link" id="booking-tab" href="#booking" data-toggle="tab" role="tab" aria-controls="booking" aria-selected="true">Booking</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane tab-bg fade show active" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
pricing tab content and link to tab3
</div>
<div class="tab-pane tab-bg fade" id="details" role="tabpanel" aria-labelledby="details-tab">details tab content</div>
<div class="tab-pane fade" id="booking" role="tabpanel" aria-labelledby="booking-tab">booking tab content</div>
</div>
If you are using JQuery with a tool that might include other JS libraries or frameworks, it is possible that conflicts occur due to several libraries using $.
Solution is to include JQuery like this:
jQuery(document).ready(function ($) {
// your JQuery code
});
I have this plunkr,
http://plnkr.co/edit/AEYQpvmjUR6DUq2jtYid?p=preview
Part of My html code:
<body ng-app="App" ng-controller="mainController">
<form name="myForm1" style="align-content:center;">
<div id="divTabs" >
<h4>CMA Analysis/Assessment</h4>
<ul class="nav nav-tabs" id="tabs" style="border-bottom: none;">
<li class="active">
<a data-toggle="tab" href="#AwarenessMenu">Awareness</a>
</li>
<li>
<a data-toggle="tab" href="#UnderstandingMenu">Understanding</a>
</li>
<li>
<a data-toggle="tab" href="#AcceptanceMenu">Acceptance</a>
</li>
<li>
<a data-toggle="tab" href="#CommitmentMenu">Commitment</a>
</li>
<li>
<a data-toggle="tab" href="#AdvocacyMenu">Advocacy</a>
</li>
<li class="next-tab">
Next >
</li>
</ul>
</div>
<div id="divAlltabContent" class="tab-content" >
<div id="AwarenessMenu" class="tab-pane fade in active">
AwarenessMenu
</div>
<div id="UnderstandingMenu" class="tab-pane fade in active">
UnderstandingMenu
</div>
<div id="AcceptanceMenu" class="tab-pane fade in active">
AcceptanceMenu
</div>
<div id="CommitmentMenu" class="tab-pane fade in active">
CommitmentMenu
</div>
<div id="AdvocacyMenu" class="tab-pane fade in active">
AdvocacyMenu
</div>
</div>
</form>
</body>
Problem is that in my application I am able to click next button to navigate the tabs but when I click on the "tab" e.g Understanding, screen goes blank.
How it runs on my application:
I can click on CMA tab. On click, the Awareness, understanding, acceptance ... tabs are shown. By default only Awareness's contents are shown (but not in plunkr, not sure why, it is showing everything).
On click on next I can navigate the tabs without any page refresh (cannot navigate in plunkr :/)
Real question:
I need to be able to click on any tab to show the content of the clicked tab. Next button should also work.
Would appreciate a lot for help on this.
I added the full js in plunkr instead of references because it wasn't working properly.
You need to change
href="#AwarenessMenu"
to
data-target="#AwarenessMenu"
You have to understand the route,when,ng-view for doing this.
My project is setup in this local link:
localhost:12345/index.html#/BookCollection
In this page there are 3 Tab components from Bootstrap. Recent, Past and UpComing
When I click on any of those Tabs I am taken back to:
localhost:12345/index.html#/
Whereas it was supposed to be:
localhost:12345/index.html#/BookCollection#Recent
The other two Tabs links are:
localhost:12345/index.html#/BookCollection#Past
localhost:12345/index.html#/BookCollection#UpComing
Please note that I am not allowed to change this Link Structure below:
localhost:12345/index.html#/BookCollection
This is the Bootstrap component I am using:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Recent">Recent</a></li>
<li><a data-toggle="tab" href="#Past">Past</a></li>
<li><a data-toggle="tab" href="#UpComing">UpComing</a></li>
</ul>
<div class="tab-content">
<div id="Recent" class="tab-pane fade in active">
<h3>Recent Books</h3>
<p>Some content.</p>
</div>
<div id="Past" class="tab-pane fade">
<h3>Past Books</h3>
<p>Some content in Past Books.</p>
</div>
<div id="UpComing" class="tab-pane fade">
<h3>UpComing books</h3>
<p>Some content in UpComing books.</p>
</div>
</div>
And I need the Tabs components from Bootstrap to work.
How do I fix it?
It seems that your code snippet works just fine. Perhaps you can explain a little bit more (and use a site like bootply since your localhost isn't reachable).
See your code snippet working here:
http://www.bootply.com/Ny6q4guDgk
I'm using the JavaScript Bootstrap 3 tabs as documented, like this:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<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>
But with Angular, it's changing the URL to /#/profile for instance..
How can I prevent this?
Just put data-target instead of href attribute and it will work without changing urls.
At one point, if a link had the _target attribute set, angular wouldn't intercept those clicks. Perhaps that will work in this case?
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