Develop Reference

make tab active, if tab class has active class

need help with active class.
i use this code to create simple tabs. all works fine.
but i can't get this code to work with "active class" as i need.
the code now select the first tab and make him active.
i want to add by myself the active class code to the div like:
need help to make this work.
Thanks
<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<p>Hi, this is the first tab.</p>
</div>
<div id='tab2' class='active'>
<p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
<p>And this is the 3rd tab.</p>
</div>
and here is the JS code. the problem as i see in the "$active"
jQuery(document).ready(function($) {
$('.info-tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});

In your each loop, you are iterating using a selector .info-tabs
$('.info-tabs').each( //some stuff here )
But i dnt see any info-tabs class anywhere.
So check your html content first.

Removing active state when toggling between divs

I have created multiple top down menu items. When the links are clicked a div slides down to show some content.
What I am trying to do with these links is toggle between them. When one div is opened an active state is added to the link, when it is closed the active state is removed and the div hidden. When you click between the links I have managed to get them to toggle between each other and the active state is added to the div that is opened.
What I cannot achieve is removing the active state and resetting some css.
Here is my Javascript:
//menu toggle
$(".trigger").click(function() {
var divToToggle = $( $(this).data('target') );
$(".toggle:visible").not(divToToggle).hide();
$(".trigger").not(divToToggle).removeClass('active');
$('.top-nav').css('margin-top', '20px');
divToToggle.slideToggle("fast", "linear");
$(this).toggleClass('active');
$('.top-nav').css('margin-top', '0px');
return false;
});
The .toggle class is on all the divs that are toggled:
<div class="account-container toggle hide"></div>
<div class="collections-container toggle hide"></div>
<div class="search-container toggle hide"></div>
The .trigger class is on all my links:
<ul class="top-nav">
<li><a class="hidden-tablet" href="">home </a></li>
<li><a class="hidden-tablet" href="">about us </a></li>
<li><a class="hidden-tablet" href="">where to buy </a></li>
<li><a class="hidden-tablet" href="">contact us </a></li>
<li class="tablet-menu visible-tablet"><a class="tablet-menu trigger" href="" data-target=".tablet-menu-container">tablet menu</a></li>
<li class="account"><a class="account trigger" href="" data-target=".account-container">account</a></li>
<li class="collection"><a class="collection trigger" href="" data-target=".collections-container">collections</a></li>
<li class="search"><a class="search trigger" href="" data-target=".search-container">search</a></li>
<li class="basket"><a class="basket trigger" href="" data-target=".home-basket-container">basket</a></li>
</ul>

It's hard to say where exactly your code is going wrong, but I've re-written it so it works slightly differently. Your click handler has to handle two possibilities: either we're clicking to hide an existing section, or we're clicking to switch to a new section. But we can also think of this as being two steps, with the second one optional: either we hide an existing section, or we hide an existing section and show a new one.
I've also switched to using ev.preventDefault() to stop the link from firing, named the jQuery variables so they start with $ (which makes them easier to differentiate). You can try it out on jsfiddle here.
$(document).ready(function () {
$(".trigger").click(function (ev) {
ev.preventDefault();
var $clickedLink = $(this);
var $divToToggle = $($(this).data('target'));
var isHideOnly = $clickedLink.hasClass('active');
// Hide the existing div and remove 'active' class.
$(".toggle:visible").hide();
$(".trigger").removeClass('active');
$('.top-nav').css('margin-top', '20px');
// If we're showing a new one, reveal it and set the active class on the link.
if (!isHideOnly) {
$divToToggle.slideToggle("fast", "linear");
$('.top-nav').css('margin-top', '0');
$clickedLink.addClass('active');
}
});
});

change menu class active

I want to change menu class active when click a submenu. But instead what my code does is that set active the default active menu.
$('#menu1').find('li').click(function(){
//removing the previous selected menu state
$('#menu1').find('li').removeClass('active');
//is this element from the second level menu?
if($(this).closest('ul').hasClass('second-level')){
$(this).parents('li').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
So for example
<ul id="menu1" class="nav navbar-nav">
<li class="active" > {{ Lang::get('messages.home') }}</li>
<li class='dropdown '>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{ Lang::get('messages.vehicles') }}
<b class="caret"></b>
</a>
<ul id = "second-level" class="dropdown-menu">
<li> <a href="form-general.html">{{link_to_action('MaintenanceController#vehicle_maintenance',
Lang::get('messages.vehicle_maintenance'),null)}}</a></li>
</ul>
</li>
when click second level submenu active class is set to home menu (default active meanu) after page refresh. How to set active the menu of submenu?

You can compare the URL in the menu item's link to the current URL on page load:
$(document).ready(function() {
$('#menu1 li').each(function() {
if (location.href.indexOf($('a',this).attr('href'))>=0) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
};
});
});
However, it's probably better to add the class yourself or use server-side code to do so (depending on how your site is generated).

Stop tab bar refresh on back button in jquery mobile 1.3.1

I'm running JQM 1.3.1 + JQ 2.0
I have a listview (no scroll) of about 60 elements + a fixed footer (tabbar). If I click on one element of my listview, it shows some content in a new hash page where I've added a "back" button.
The active button of the tabbar is set when populating the listview.
When I click on the back button, the previous page shows up but the active button from the tabbar is not active anymore (none of the buttons are active). Which makes me think that all the elements on the first page have been refreshed.
How can I prevent the elements from being refreshed and to keep their state on a "back" call ?
<div data-role='navbar' id='kms'>
<ul id='kml'>
<li id='l5'><a href='#' id='d5' class='ui-btn-active'>Ici</a></li>
<li id='l20'><a href='#' id='d20'>5 km</a></li>
<li id='l50'><a href='#' id='d50'>20 km</a></li>
<li id='l100'><a href='#' id='d100'>50 km</a></li>
</ul>
</div>

Working example: http://jsfiddle.net/Gajotres/6h7gn/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#kml li', function(){
var selectedLi = $(this);
$('#kml li').each(function( index ) {
var loopLi = $(this);
if(loopLi.find('a').hasClass('ui-btn-active')) {
$(this).find('a').removeClass('ui-btn-activ').removeClass('ui-state-persist');
}
});
selectedLi.find('a').addClass('ui-state-persist');
setTimeout(function(){
$.mobile.changePage( "#second", { transition: "slide"});
},100);
});
});

Remove the class ui-btn-active from the tab bars.
And write your own customized css class for active and passive tabs.
It worked for me.This may help.
.footer-passive a
{
background: #99ce3e ; /*light green*/
}
for active buttons
.footer-active a
{
background: #709630;/*dark green*/
}
Well then try using below code snippet.
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li class="footer-color-active"><img src="your_file/path1" /></li>
<li class="footer-color"><a href="sample2.html" ><img src="your_file/path2" /></a></li>
<li class="footer-color"><a href="sample3.html" ><img src="youtr_file/path3" /></a></li>
</ul>
</div>
</div>

simulate click to view tab when function is run

I am using the following tabs in a project :
//Tabs
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
$links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e){
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
}); //End Tabs
and the HTML is as follows:
<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'></div>
<div id='tab2'></div>
<div id='tab3'></div>
The problem I am having is that I want to run a function within the active tab, and then automatically select another tab where the results of the previously executed code will appear.
I am unsure how to go about simulating a click in order to automatically select the next tab, so any help will be greatly appreciated!
Thanks in advance.

A simple way to simulate a click, is using .trigger()
$("#tab2").trigger("click"); //when you need in the function