When a user clicks on the menu tab, I need the respective tab content to open and once the click on the menu tab again the content will close.
I've removed all the active class from both the tab menu and tab content .
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
$(this).removeClass('active');
$('.tab-pane[id="'+ href +'"]').toggleclass('active');
});
<!-- Nav tabs -->
<ul class="nav" role="tablist">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">ZOOO</div>
<div class="tab-pane" id="profile" role="tabpanel">ABC</div>
<div class="tab-pane" id="messages" role="tabpanel">123</div>
<div class="tab-pane" id="settings" role="tabpanel">EFG</div>
</div>
This is fiddle Example
Related
I need to click on a link and maintain a tab active,
this code are the tabs that are working right, maintaining the tab active:
<ul class="nav nav-tabs" role="tablist" id="MovieContent">
<li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['DUB'])">
<a class="tab nav-link" data-toggle="tab" href="#Dubled_{{mov.ID}}"
ng-class="{active: language=='dubbed'}" ng-click="language='dubbed'">
Dubbed
</a>
</li>
<li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['LEG'])">
<a class="tab nav-link" data-toggle="tab" href="#Legended_{{mov.ID}}"
ng-class="{active: language=='legended'}" ng-click="language='legended'">
Legended
</a>
</li>
<li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['NAC'])">
<a class="tab nav-link" data-toggle="tab" href="#National_{{mov.ID}}"
ng-class="{active: language=='national'}" ng-click="language='national'">
National
</a>
</li>
</ul>
This is my attempt and it is not maintaining active the clicked tab, this code is inside the first tab only:
<div class="nav nav-tabs" role="tablist" id="MovieContent">
<div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['DUB'])">
<a class="tab nav-link" data-toggle="tab" href="#Dubled_{{mov.ID}}"
ng-class="{active: language=='dubbed'}" ng-click="language='dubbed'">
Dubbed
</a>
</div>
<div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['LEG'])">
<a class="tab nav-link" data-toggle="tab" href="#Legended_{{mov.ID}}"
ng-class="{active: language=='legended'}" ng-click="language='legended'">
Legended
</a>
</div>
<div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['NAC'])">
<a class="tab nav-link" data-toggle="tab" href="#National_{{mov.ID}}"
ng-class="{active: language=='national'}" ng-click="language='national'">
National
</a>
</div>
</div>
I encounter following problems when using bs4 toggled nav-pills wrapped inside a nav tabs submenu:
next url doesn't load pill with id option2: http://localhost/test#option2 although if I click on it it switches to that pill.
When I am on pill with id option2 and I do page refresh it gets back to first pill - the one with id option1
I need to have a functional link for each pill which should open that specific pill and should be persistent at page refresh - I think it is called deep linking but examples I found are either different or old.
<nav>
<div class="nav nav-tabs" id="nav-tab" >
<a class="nav-item nav-link disabled" id="nav-menu1-tab" href="#">menu1</a>
<a class="nav-item nav-link active" id="nav-menu2-tab" href="#nav-menu2">active-tab</a>
<a class="nav-item nav-link disabled" id="nav-menu3-tab" href="#">menu3</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-menu2"></div>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-option1-tab" data-toggle="pill" href="#option1" role="tab" aria-controls="pills-option1" aria-selected="true">option1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-option2-tab" data-toggle="pill" href="#option2" role="tab" aria-controls="pills-option2" aria-selected="false">option2</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="option1" role="tabpanel" aria-labelledby="pills-option1-tab">option1...</div>
<div class="tab-pane fade" id="option2" role="tabpanel" aria-labelledby="pills-option2-tab">option2...</div>
</div>
</div>
I'm a big fan of http://thednp.github.io/bootstrap.native/ which is a vanilla JS version of Bootstrap. Following their docs, I did this:
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item active">
<a id="home-tab" class="nav-link" href="#home" data-toggle="tab" data-height="true" aria-controls="home" aria-selected="true" role="tab">Home</a>
</li>
<li role="presentation" class="nav-item">
<a id="profile-tab" class="nav-link" href="#profile" data-toggle="tab" data-height="true" aria-controls="profile" aria-selected="false" role="tab">Profile</a>
</li>
<li role="presentation" class="nav-item">
<a id="messages-tab" class="nav-link" href="#messages" data-toggle="tab" data-height="true" aria-controls="messages" aria-selected="false" role="tab">Messages</a>
</li>
<li role="presentation" class="nav-item">
<a id="settings-tab" class="nav-link" href="#settings" data-toggle="tab" data-height="true" aria-controls="settings" aria-selected="false" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" aria-labelledby="home-tab" id="home">.1</div>
<div role="tabpanel" class="tab-pane" aria-labelledby="profile-tab" id="profile">2</div>
<div role="tabpanel" class="tab-pane" aria-labelledby="messages-tab" id="messages">3</div>
<div role="tabpanel" class="tab-pane" aria-labelledby="settings-tab" id="settings">4</div>
</div>
But when you click a tab, nothing happens. When this HTML is in the page, it also prints Uncaught TypeError: Cannot read property 'parentNode' of null into the console.
When I try the JS approach by using new Tab() it also says that Tab is not defined.
How can this be fixed?
In my code i have bootstrap 4 Tab .I want first all the tab-content will be hide when i click tab li then the tab-contents will be shown.
For that i've removed the active class from tab-pane div so now at first contents are not showing and when i click on the tab li it is showing then but after i click on that li again it does not closing .
I want when again i click the tab li button the tab contents should be closed again.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Just want when click the menu it will show the content and when click again the menu it should close.
Help me
Updated
Add this extra code to remove the active class on click again.
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
$(this).removeClass('active');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
})
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
//alert(href);
$(this).removeClass('active');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Now its working
use following Bootstrap CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Add the following Bootstrap CDN to your code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
I am wondering why I can't get the bootstrap tabs to correspond to links. I've tried a bunch of solutions on stackoverflow, but the code structure all looks different than mine because I presume they're not bootstrap 4.
Here is the html from Tabs Using Data Attributes
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
Using this JS from another post does actually change the link to include #page when clicking on tabs, but if i enter that address, it always goes back to the homepage:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
I do apologize that this question has been asked in different iterations other places, but I have not seen the base question (i.e., how to do this with the starter code from bootstrap) answered.
Your markup is good.
Which means you probably have an error in your console. Please make sure you loaded these scripts, in this order:
jquery(.min).js
popper(.min).js (used to be tether(.min).js in older versions)
bootstrap(.min).js
There are many ways to get them, but the safest route is to go to Bootstrap v4 and scroll down to Bootstrap CDN.
Your markup + correct scripts =
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">Home</div>
<div class="tab-pane" id="profile" role="tabpanel">Profile</div>
<div class="tab-pane" id="messages" role="tabpanel">Messages</div>
<div class="tab-pane" id="settings" role="tabpanel">Settings</div>
</div>
Note you do not need any extra javascript to make it work, it's all included into bootstrap.js.
You just have to include bootstrap.bundle.js along with jquery and bootstrap.js in following order
jquery.min.js
bootstrap.min.js
bootstrap.bundle.min.js