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">.
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 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>
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');
}
}
My html for a tabbed menu and its content:
<div class="tab-menu"> <!-- menu -->
<ul>
<li>link to tab 1</li>
<li>link to tab 2</li>
<li>link to tab 3</li>
</ul>
</div>
<div class="tab-wrapper"> <!-- content -->
<!-- BEGIN FIRST TAB -->
<div id="tab1" class="tab">first tab content</div>
<div id="tab2" class="tab">second tab content</div>
<div id="tab3" class="tab">third tab content</div>
</div>
... and the script to make the menu work is
// Displays the first tab when
$(".tabs").each(function(){
$(this).find(".tab").hide();
$(this).find(".tab-menu li:first a").addClass("active").show();
$(this).find(".tab:first").show();
});
$(".tabs").each(function(){
$(this).find(".tab-menu a").click(function() {
$(this).parent().parent().find("a").removeClass("active");
$(this).addClass("active");
$(this).parent().parent().parent().parent().find(".tab").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
The menu works when user clicks a tab. This means the menu opens up with the first <div> visible by default and when the user clicks another tab, that corresponding <div> appears just as expected. However, when I type in the url mysite/path#tab2, it still opens up with tab1 open. What do I need to do to make it open with tab2? Specifically, how do I access the url and extract the label? I want to do this in javascript
EDIT: It seems document.location.href provides the full url. How do I parse and extract the label from this url?
When the page is loaded, check the location.hash property and behave consequently:
$(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
Better than that, don't register any click listener at all, and just use the hashchange event:
$(window).hashchange(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});