"active" option doesn't change selected tab - javascript

I am using jQuery mobile (not jQuery UI). What I would like to do is to change active tab without triggering click.
HTML
<div data-role="page" id="settingsPage">
<div data-role="content">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a id="tab0" href="#one" class="ui-btn-active">Tab One</a></li>
<li><a id="tab1" href="#two">Tab Two</a></li>
<li><a id="tab2" href="#three">Tab Three</a></li>
</ul>
</div>
<div id="one" style="display: none" class="ui-body-d ui-content">Tab One content</div>
<div id="two" style="display: none" class="ui-body-d ui-content">Tab Two content</div>
<div id="three" style="display: none" class="ui-body-d ui-content">Tab Three content</div>
</div>
</div>
JS
var tabIndex = 0;
setInterval(function(){
tabIndex++;
if (tabIndex >= 3)
tabIndex = 0;
else if (tabIndex < 0)
tabIndex = 2;
$("#tabs").tabs( "option", "active", tabIndex );
}, 3000);
DEMO
What happens is the tab content is switching, but the active tab doesn't. How can I switch both, without initiating click event and leveraging jQuery Mobile/UI as much as possible?

You can use addClass and removeClass for ui-btn-active class on $("#tab" + tabIndex). Use removeClass before incrementing tabIndex and addClass after incrementing.
Here's the jsfiddle.
UPDATE
You can show the content in the tab based on the tabIndex by using a switch statement. Hide all tab content before tabIndex is incremented then based on tabIndex show tab content.
Here's the new jsfiddle.
UPDATE 2
Thanks to Omar, you can remove and add the ui-btn-class on the tabsactivate event. I've updated the original fiddle with what Omar has in the comments. This is the newest jsfiddle.
Here's the tabsactivate event that you need to add to your code:
$("#tabs").on("tabsactivate", function(e, ui) {
ui.oldTab.find("a").removeClass("ui-btn-active");
ui.newTab.find("a").addClass("ui-btn-active").focus();
});

Why don't you simulate the click?
$("#tab"+tabIndex).click();
instead of
$("#tabs").tabs( "option", "active", tabIndex );

Related

How to trigger the click event of a JQuery tab element

I have an issue with triggering the click event of one of the elements, i added to my Jquery tab. As you know, when one of the links in a Jquery tab is clicked, it changes the content of a specified div to the contents of the div with an id specified in the '<a> </a>' of one of the Jquery tab elements (in this case the one that has just been clicked)..
What I want to do is trigger the click event on this element (i.e the Jquery tab group element that has just been clicked) when i click another element in my document (i.e the element with the id #viewClassesNavBtn).
-------This the call back function code snippet ------
$(document).ready(function(){
$("#viewClassesNavBtn").click(function(){
<!-- $("#dasCBtn").click();-->
document.getElementById('dasCBtn').click();
});
});
------This is the jquery tab ui section------
<ul id="tabs_ul" style="background-color:transparent; border:none;">
<li class="dashBBtn" id="dasBtn">Dash Board</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasCBtn">Classes</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasPBtn">Profile</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasBStn"> Settings</li>
</ul>
When I click the element with id #viewClassNavBtn, I expect it to simulate the tab switching event of the JQuery UI but it doesn't. I get the feeling it is not possible, but I am inexperienced with JQuery UI tabs and stuff, so if it is possible, please help.
jQuery UI is not attaching the click event to the li items, it's attaching it to the link. Simply move the id tags onto the link and problem solved. Included a function to simulate a mouse click instead of relying on the technically obsolete .click() method (which doesn't seem to show any signs of going away)
function clickTab(tab) {
let click = new MouseEvent('click', {
bubbles: true,
cancelable: true,
synthetic: true,
view: window
});
tab.dispatchEvent(click);
}
$( function() {
$( "#tabs" ).tabs();
$(".navBtn").click(function() {
let tab = document.getElementById(this.dataset.for);
if (document.getElementById("simulate").checked) {
clickTab(tab);
} else {
tab.click();
}
});
});
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li class="dashBBtn"><a id="dasCBtn" href="#tabs-1">Nunc tincidunt</a></li>
<li class="dashBBtn"><a id="dasPBtn" href="#tabs-2">Proin dolor</a></li>
<li class="dashBBtn"><a id="dasBStn" href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Stuff in the C tab</p>
</div>
<div id="tabs-2">
<p>Stuff in the P tab</p>
</div>
<div id="tabs-3">
<p>Stuff in the S tab</p>
</div>
</div>
<div>
<button class="navBtn" type="button" data-for="dasCBtn">C</button>
<button class="navBtn" type="button" data-for="dasPBtn">P</button>
<button class="navBtn" type="button" data-for="dasBStn">S</button>
<input id="simulate" type="checkbox" checked>
</div>
</body>

Bootstrap tab activation with JQuery

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');
}
}

Controlling visibility of 2 divs simultaneously

I'm trying to use a tabbed interface to display content on a website. The first set of divs is the content (text) and the second is an associated image in a div outside the div containing the text as follows:
<div id="side-img-container">
<div class="side-img" id="image_1"><img src="image1.jpg" /></div>
<div class="side-img" id="image_2"><img src="image2.jpg" /></div>
<div class="side-img" id="image_3"><img src="image3.jpg" /></div>
<div class="side-img" id="image_4"><img src="image4.jpg" /></div>
<div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
<li>Tab 1</div>
<li>Tab 2</div>
<li>Tab 3</div>
<li>Tab 4</div>
<li>Tab 5</div>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab_1">Content 1</div>
<div class="tab_content" id="tab_2">Content 2</div>
<div class="tab_content" id="tab_3">Content 3</div>
<div class="tab_content" id="tab_4">Content 4</div>
<div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>
This uses the following Jquery to make the tabs work:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Is there any way the above javascript can be added to/adapted so that the corresponding image tab is displayed when a content tab is displayed ie: tab_1 and image_1 etc. ?
First of all, your HTML is invalid - you're closing <li> list items with </div> tags. You've also forgotten to close the quote surrounding the #content element's id attribute value.
The original JavaScript code isn't particularly efficient, so we might as well rewrite it. Using this code, you do not need each of the tab content to have a class attribute, which certainly lightens up the HTML quite a bit:
// Select all of the tab contents, then hide them
// Cache elements that need to be reused
var tabContents = $(".tab_container, #side-img-container").children().hide(),
tabs = $("ul.tabs li");
// Show the first tab's content, and add in the active class
tabs.first().addClass("active");
tabContents.filter(':first-child').show();
// Attach click event handler
tabs.click(function() {
// Cache the clicked on tab element
var $this = $(this),
// Obtain the element index number
activeTab = $this.index() + 1;
// Only change tabs if the clicked tab isn't active
if (!$this.hasClass('active')) {
// Remove the 'active' class from the original anchor and add it to the current one
$this.addClass('active').siblings().removeClass('active');
// Hide all of the other tabs and fade in the active one
tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn();
}
return false;
});
See a simple demo of this here: http://jsfiddle.net/ND7nU/
Try this :
$('div.side-img').hide();
$('div.side-img:first').show();
$("ul.tabs li").click(function() {
$('div.side-img').eq($(this).index()).show();
// remaining code
}
Check this example on jsfiddle.net
Bit quick and dirty from the top of my head:
var s = activeTab.attr('id');
var num = s.substr(4, 1);
var imgstr = "#image-" + num;
$(".side-img").hide();
$(imgstr).show();
Edit: You can use this anywhere in the tab click event handler.
Edit 2: var s = etc Fix.

Problem with add/remove class in jquery

I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..
The first link should always be active on page start.
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.pages > div');
$('div.sidemenu ul.list a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.sidemenu ul.list li').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
});
</script>
<div class="sidemenu">
<ul class="list">
<li class="active">Login & Password</li>
<li>Contact Details</li>
<li>Company & Branch Details</li>
<li>Address Details</li>
</ul>
</div>
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="second">
CONTENT 2
</div>
<div id="third">
CONTENT 3
</div>
<div id="forth">
CONTENT 4
</div>
</div>
Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)
You're adding the class to the <a> element, but removing it from its parent <li> element.
$(this).addClass('active'); // "this" is the <a> that received the event
// This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');
Looks like you intend for the <li> to have the class. So you'd do this instead:
$(this).parent().addClass('active');
Or if you don't mind me mixing a little DOM API in:
$(this.parentNode).addClass('active');
Now go get a refill! ;o)
you add the "active" class to the A-Element
$(this).addClass('active');
i guess you want to add it to the LI-Element, so either you add
$(this).parent().addClass('active');
or you register the onclick on the LI-Element

Hide current tab and display the next tab based on href?

I am trying to hide the current tab which is displayed and fadein the new tab based on its href using jquery...
Here is my HTML
<div id="leader">
<ul id="llist">
<li class="t current"><span>sage solutions</span></li>
<li class="m"><span>credit mangement solutions</span></li>
<li class="b"><span>third party additions</span></li>
</ul>
<div id="lcontent">
<div id="solutions" class="tab">
<h2>Title</h2>
Description
</div>
<div id="management" class="tab">
<h2>Title</h2>
Description
</div>
<div id="thirdparty" class="tab">
<h2>Title</h2>
Description
</div>
</div>
</div>
And the JQUERY (which also slides an image to the tab which is selected)
$('#leader #llist li').click(function() {
$('#leader #llist li').removeClass('current');
var thisTop = $(this).offset().top;
$('.pointer').animate( {'top': thisTop} );
$(this).addClass('current');
$('.tab').fadeOut();
});
The current tabs dont currently fadeout or fadein when the links in the list are clicked...any help would be appreciated.
Here is an example of what I think you are looking for.
http://jsbin.com/iceli4/edit
Hope this gets you started.
Bob

Categories