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
Related
Is it possible to swap the first tab with an active one on click?
I have a simple Bootstrap tabs and broke my head trying to replace the first tab with an active one.
So that when I clicked on tab "D" it swaps places with tab "A".
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>bootstrap 4 vertical tabs</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#A" role="tab" aria-controls="A">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#B" role="tab" aria-controls="B">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#C" role="tab" aria-controls="C">C</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#D" role="tab" aria-controls="D">D</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="A" role="tabpanel">A Content</div>
<div class="tab-pane" id="B" role="tabpanel">B Content</div>
<div class="tab-pane" id="C" role="tabpanel">C Content</div>
<div class="tab-pane" id="D" role="tabpanel">D Content</div>
</div>
</div>
My current JS knowledge is temporarily poor so I would really appreciate any help.
To achieve this you can use prependTo() to move the clicked tab to the first position in the list. You can see this working in the example below. I would strongly suggest you do not do this, as it's incredibly annoying behaviour and not clear to your users why tabs are moving around.
let $navlinks = $('.nav-link').on('click', e => {
$navlinks.removeClass('active');
$(e.target).prependTo('ul.nav');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>bootstrap 4 vertical tabs</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#A" role="tab" aria-controls="A">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#B" role="tab" aria-controls="B">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#C" role="tab" aria-controls="C">C</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#D" role="tab" aria-controls="D">D</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="A" role="tabpanel">A Content</div>
<div class="tab-pane" id="B" role="tabpanel">B Content</div>
<div class="tab-pane" id="C" role="tabpanel">C Content</div>
<div class="tab-pane" id="D" role="tabpanel">D Content</div>
</div>
</div>
i am validating tab one input fields on clicking on second tab
please have a look on my html
<ul class="nav nav-tabs makeblock" role="tablist">
<li class="nav-item"> <a class="nav-link active" href="#StuAdmn" role="tab" data-toggle="tab">Admission</a> </li>
<li class="nav-item" id="tabStudentGeneralDetails"> <a class="nav-link" href="#stuGenDetails" role="tab" data-toggle="tab">General </a> </li>
<li class="nav-item"> <a class="nav-link" href="#stuParentDetails" role="tab" data-toggle="tab">Parent</a> </li>
<li class="nav-item"> <a class="nav-link" href="#joingDetails" role="tab" data-toggle="tab">Joining</a> </li>
<li class="nav-item"> <a class="nav-link" href="#stuAdrs" role="tab" data-toggle="tab">Address</a> </li>
<li class="nav-item"> <a class="nav-link" href="#feeDetails" role="tab" data-toggle="tab">Fee </a> </li>
</ul>
</div>
//tab 1 div
<div role="tabpanel" class="tab-pane active fade in" id="StuAdmn">
<div class="col-md-4">
<label for="firstName"><span>*</span>First Name:</label>
<input type="text" class="form-control only-alpha" placeholder="First Name" id="firstName">
</div>
</div>
//tab 2 div
<div role="tabpanel" class="tab-pane fade" id="stuGenDetails">
</div>
i am validation id="firstName" field on clicking on id="tabStudentGeneralDetails" tab i dont want to navigate to clicked tab until unless previous tabs tab fields are validated .
i have tried below code
$(document).on("click",".newSec #tabStudentGeneralDetails",function(e){
var firstName=$(".newSec #firstName").val();
if(firstName == "")
{
$(this).find("a").attr("aria-expanded",false);
alert("Please enter student first name !");
}
});
by above code i can able to validate field of first tab but not able to stop moving to clicked tab when first tab data is inappropriate .
can any one help with this ?
thank you.
In Bootstrap, the tab navigation can be activated in two different ways.
You can specify data-toggle="tab" in your HTML to activate the tab navigation.
You can activate manually using JavaScript with the help of .tab() function.
In your example, you have used the data-toggle="tab" method. This will activate the tab navigation automatically and you have limited control over its behavior.
In order to control its behavior based on some validation criteria, you need to used the second method to activate the tabs.
Please see the code below for a basic example. Here, I have removed the data-toggle="tab" from the HTML and used JavaScript to activate the tabs. I have defined an isValid function to check for form errors and the tab navigation will work only if the errors are resolved (in this case, enter some data in the input field).
$('#myTab a').on('click', function(e) {
e.preventDefault();
if (isValid()) {
$(this).tab('show');
}
});
function isValid() {
const text = $("#homeText").val();
if (text.length === 0) {
return false;
}
return true;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Home Tab Content<br>
<input type="text" id="homeText" /> Enter some value
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Tab Content</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Tab Content</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?
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