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>
Related
I need to move my nav tab to the subscribtion tab if a condition is met.I am blank without any idea. Any of your help is much appreciated.
My HTML code:
<div class="matches-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link active" id="all-matches-tab" data-toggle="tab" href="#all-matches" role="tab" aria-controls="all-matches" aria-selected="true">Home</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="upcoming-matches-tab" data-toggle="tab" href="#upcoming-matches" role="tab" aria-controls="upcoming-matches" aria-selected="false">Upcoming Matches</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="Subscription-tab" data-toggle="tab" href="#Subscription" role="tab" aria-controls="Subscription" aria-selected="false">Subscription</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="all-matches" role="tabpanel" >
Tab 1
</div>
<div class="tab-pane fade" id="upcoming-matches" role="tabpanel">
Tab 2
</div>
<div class="tab-pane fade" id="Subscription" role="tabpanel">
Tab 3
</div>
</div>
</div>
If the condition
if ($scope.balance >= matchfee){
//change the tab to subscription tab
}
is met change my tab to subscription.
As far as I can understand from your html code. You need to bind your html data from angularJS controller. EG. https://material.angularjs.org/latest/demo/tabs 'Dynamic Tabs'. For now you can only make it with CSS selectors only
But if you do not want to dynamically manage your tabs you can use ng-class like
<li class="nav-item" role="presentation"><a class="nav-link active" id="all-matches-tab" data-toggle="tab" href="#all-matches" role="tab" aria-controls="all-matches" aria-selected="true">Home</a></li>
To => ng-class="isActiveTab ? 'active' : '' "
I have the following html code:
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
I want that when I click on the second tab "Profile" it redirects to a new link (ad example "myapp/test").
How could I do it?
Correct me if I am wrong: If the user clicks on the Profile tab, this should navigate to another site instead of opening the Profile tab.
Remove the data-toggle from the <a> element and put your link inside the href attribute. The data-toggle attribute tells Bootstrap what to do if the user clicks in that element. Bootstrap uses the 'href` attribute to find the corresponding element.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="myapp/test" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</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 am trying to detect when a tab is shown through Vanilla JS and the event isn't working. I have looked through multiple questions about this and none of them seem to help. Here is my current code.
var aTabs = document.querySelectorAll('a[data-toggle="tab"');
console.log(aTabs);
for (let i = 0; i < aTabs.length; i++) {
console.log(aTabs[i].id);
aTabs[i].addEventListener('shown.bs.tab', function(e) {
console.log("Showing content for tab: " + e.target.href);
}, false);
}
<ul class="nav nav-tabs" id="tab-navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1link" data-toggle="tab" href="#1" role="tab" aria-controls="community" aria-selected="true">1 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="2link" data-toggle="tab" href="#2" role="tab" aria-controls="2" aria-selected="false">2 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="3link" data-toggle="tab" href="#3" role="tab" aria-controls="3" aria-selected="false">3 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="4link" data-toggle="tab" href="#4" role="tab" aria-controls="4" aria-selected="false">4 <span class="badge badge-primary"></span></a>
</li>
</ul>
<div class="tab-content" id="tab-navigation-content">
<div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="tab1"></div>
<div class="tab-pane fade" id="2" role="tabpanel" aria-labelledby="tab2"></div>
<div class="tab-pane fade" id="3" role="tabpanel" aria-labelledby="tab3"></div>
<div class="tab-pane fade" id="4" role="tabpanel" aria-labelledby="tab4"></div>
</div>
I have the console logs to make sure I am getting all the correct values and those are correct however the addEventListener isn't adding the event. When I click through tabs they do not trigger.
All the console logs show the correct elements, just the event isn't fired when switching between tabs.
According to this Stack Overflow post, you cannot use ".addEventListener" for custom jQuery events (e.g. "shown.bs.tab").
I cannot say why the jQuery ".on" version wouldn't work, though.
Your AddEventListener was wrong, as you weren't telling it what event you wanted to listen too. If you wanted to listen to the tab selection you should pass the click event handler.
Here is a JSFiddle as a sample http://jsfiddle.net/97nq823z/
var aTabs = document.querySelectorAll('a[data-toggle="tab"');
console.log(aTabs);
for (let i = 0; i < aTabs.length; i++) {
console.log(aTabs[i].id);
aTabs[i].addEventListener('click', writeToConsole(aTabs[i]));
}
function writeToConsole(tab) {
console.log(tab);
}
<ul class="nav nav-tabs" id="tab-navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1link" data-toggle="tab" href="#1" role="tab" aria-controls="community" aria-selected="true">1 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="2link" data-toggle="tab" href="#2" role="tab" aria-controls="2" aria-selected="false">2 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="3link" data-toggle="tab" href="#3" role="tab" aria-controls="3" aria-selected="false">3 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="4link" data-toggle="tab" href="#4" role="tab" aria-controls="4" aria-selected="false">4 <span class="badge badge-primary"></span></a>
</li>
</ul>
<div class="tab-content" id="tab-navigation-content">
<div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="tab1"></div>
<div class="tab-pane fade" id="2" role="tabpanel" aria-labelledby="tab2"></div>
<div class="tab-pane fade" id="3" role="tabpanel" aria-labelledby="tab3"></div>
<div class="tab-pane fade" id="4" role="tabpanel" aria-labelledby="tab4"></div>
</div>
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