I was experimenting with programatically changing tabs using jQuery. I tried to implement the solution given by #MasterAM here. However, the Chrome console shows the error Uncaught TypeError: undefined is not a function
Here is my HTML:
<div id="click-me-div">Click Me</div>
<ul class="nav nav-tabs">
<li class="active">I like Fruits</li>
<li>I like Veggies Too</li>
<li>But Samosa's Rock</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="fruits">Apple, Kiwi, Watermellon</div>
<div class="tab-pane" id="veggies">Kale, Spinach, Pepper</div>
<div class="tab-pane" id="samosas">Awesome, Spine Tingling, Explosive</div>
</div>
And here is the jQuery:
$(document).ready(function() {
$("#click-me-div").click(function() {
alert('yes, the click actually happened');
('.nav-tabs a[href="#samosas"]').tab('show');
});
});
The desired outcome is that, if I click "Click Me", the active tab should change to the "samosas" tab.
What am I doing wrong?
You left out the jQuery function
$(document).ready(function() {
$("#click-me-div").click(function() {
alert('yes, the click actually happened');
$('.nav-tabs a[href="#samosas"]').tab('show');
});
});
Fiddle
Try this code
You can use onclick() function and path id name of tab.
<a onclick='ActivTab("Security")' class="nav-link" data-toggle="tab" href="#Security" aria-controls="profile" role="tab" id='Security'>Security</a>
<script>
$(document).ready(function(){
ActivTab('Security');
});
function ActivTab(id){
// $('.nav-tabs a[href="#' + id + '"]').tab('show');
$('.nav-tabs a[href="#' + id + '"]').trigger('click');
};
</script>
Related
I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
Hi all Regarding this post I could solve my problem opening a new page and a particuler tab by using this script
window.onload = function(){
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
}
//Change hash for page-reload
$('.nav-tabs a[href=#' + url.split('#')[1] + ']').on('shown', function (e) {
window.location.hash = e.target.hash;
});
}
The link looks like this
index.php?content=seminare#wppp
I'm using a php include function. In this case I include seminare.php into index.php and open tab WPPP.
The code of the tabs look like this
<ul class="nav nav-tabs responsive-tabs">
<li class="active">
<a data-toggle="tab" href="#monitor"><i class="fa fa-circle" aria-hidden="true"></i>Monitor</a>
</li>
<li>
<a data-toggle="tab" href="#wppp"><i class="fa fa-circle" aria-hidden="true"></i>WPPP</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="monitor">
content 1
</div><!-- tab-group -->
<div class="tab-pane fade in" id="wppp">
content 2
</div><!-- tab-group -->
</div>
By now I end up on the top of the page without the focus on the open tab.
So I have to scroll down to the tab. How can I manage to jump to the tab area as well as like the normal anchor functionality?
Thanks guys.
I'd use jQuery to do this easily:
$(function() {
$(document).scrollTop( $("#wppp").offset().top );
});
But make sure its visible though.
Problem solved. Because the particuler div was hidden it couldn't work.
if (url.match('#')) {
$('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
$('#' + url.split('#')[1]).addClass('active');
}
Add class 'active' and it works
I am working with bootstrap 3, and I am having some problems on linking a url to a specific tab, the panel changes but the activated tab doesnt.
So I want the line link, to go to the tab2, but it only goes to the panel of the tab2, it doesn't activate the tab.
Here is the html:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>link.</p>
</div>
<div class="tab-pane" id="tab2">
<p> I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3 </p>
</div>
</div>
</div>
You can test this in this link http://bootply.com/90412
In order to activate the tab you can use jQuery plugin as shown in bootstrap.
So you can add this piece of jQuery code to your program to enable the tab:
$(function () {
$('#tab1 a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
You can check this link: Updated code
The activating of the tab depends of the ul structure.
In your example case you could overwrite the click event of the plugin by adding to the end of your document (after Boostrap's Javascript):
$(function(){
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
if($(this).parent().prop('tagName')!=='LI')
{
$('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
}
else
{
$(this).tab('show')
}
})
});
Ref: Get element type with jQuery
Note: a shorter version will also work in this case:
$(function(){
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
Like Rohitha's answer, but a little more general:
$(function () {
$('a.link-to-tab').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
Works for any anchor tag with class="link-to-tab" and an href to the tab id to be shown. For example, <a class="link-to-tab" href="#tab2">.
I have the following code:
<ul class="nav nav-tabs">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
And the following script:
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.tab-pane a[href="#' + tab + '"]').tab('show');
};
In this case when the page is ready, the second tab will be activated but I always get a JavaScript error in the line $('.tab-pane a[href="#' + tab + '"]').tab();
Can anyone help me, please?
Applying a selector from the .nav-tabs seems to be working:
See this demo.
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
I would prefer #codedme's answer, since if you know which tab you want prior to page load, you should probably change the page html and not use JS for this particular task.
I tweaked the demo for his answer, as well.
(If this is not working for you, please specify your setting - browser, environment, etc.)
Perform a click on the link to the tab anchor whenever the page is ready i.e.
$('a[href="' + window.location.hash + '"]').trigger('click');
Or in vanilla JavaScript
document.querySelector('a[href="' + window.location.hash + '"]').click();
This one is quite straightforward from w3schools: https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane fade active in" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
</div>
Add active class to any li element you want to be active after page load.
And also adding active class to content div is needed ,fade in classes are useful for a smooth transition.
Add an id attribute to a html tag
<ul class="nav nav-tabs">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Then using JQuery
$("#tab_aaa").tab('show');
Having just struggled with this - I'll explain my situation.
I have my tabs within a bootstrap modal and set the following on load (pre the modal being triggered):
$('#subMenu li:first-child a').tab('show');
Whilst the tab was selected the actual pane wasn't visible. As such you need to add active class to the pane as well:
$('#profile').addClass('active');
In my case the pane had #profile (but this could have easily been .pane:first-child) which then displayed the correct pane.
Works fine on Bootstrap 5.1.3.
$('#nav-profile-tab').click();
why not select active tab first then active the selected tab content ?
1. Add class 'active' to the < li > element of tab first .
2. then use set 'active' class to selected div.
$(document).ready( function(){
SelectTab(1); //or use other method to set active class to tab
ShowInitialTabContent();
});
function SelectTab(tabindex)
{
$('.nav-tabs li ').removeClass('active');
$('.nav-tabs li').eq(tabindex).addClass('active');
//tabindex start at 0
}
function FindActiveDiv()
{
var DivName = $('.nav-tabs .active a').attr('href');
return DivName;
}
function RemoveFocusNonActive()
{
$('.nav-tabs a').not('.active').blur();
//to > remove :hover :focus;
}
function ShowInitialTabContent()
{
RemoveFocusNonActive();
var DivName = FindActiveDiv();
if (DivName)
{
$(DivName).addClass('active');
}
}
I have which have two links. First goes to page with default activated tab, and second link - to second tab.
I alway get default tab activated.
Here is my js code(opens tab #home):
$('.activate_tab').click(function(e){
$('#myTab a[href="#profile"]').tab('show');
});
tried also(not doing anything):
$('.activate_tab').click(function(e){
e.preventDefault();
$('#myTab a[href="#profile"]').tab('show');
});
and my default Bootstrap HTML code:
<ul id="myTab" class="nav nav-tabs">
<li class="reports active left"><a href="#home" data-toggle="tab" >Details</a></li>
<li class="reports right not_active" >Analytics</li>
</ul>
...
<div class="tab-pane fade in active" id="home">//default
...
<div class="tab-pane fade" id="profile">//not default
...
//link on other page, which should activate default( home )tab
http://super.com
//link on other page, which should activate not default tab
<img alt="" height="19" src="http://127.0.0.1:3000/assets/analytics.png" >
What I'm missing guys ?
I changed my link:
aaa
and my JavaScript:
var activeTab = $('[href=' + location.hash + ']');
activeTab && activeTab.tab('show');
$('.activate_tab').click(function(e){
$('#myTab a[href="#profile"]').tab('show');
});
try this
<div class="tab-pane fade" id="home">//default
...
<div class="tab-pane fade in active" id="profile">//not default
or you can try on your second link page
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(1) a').tab('show');