make tab active, if tab class has active class - javascript

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.

Related

Toggle section visibility based on data-attributes and class

I have a menu which will be used to toggle different sections of the page. Each list item in the menu has a data-attribute. This data-attribute matches with the class of the section i would like to toggle.
How can I match the data-attribute of the active menu item with the class of the section I would like to toggle in the main content?
Any help appreciated!
Codepen
link
Markup:
App Menu
<ul class="tablet--nav__Parent">
<li data-name="js-classifieds--description" class="active">
<i class="icon-description"></i>
Description</li>
<li data-name="js-classifieds-specification" class="">
<i class="icon-specification"></i>
Specification
</li>
<li data-name="js-classifieds-reviews" class="">
<i class="icon-userreviews"></i>
User Reviews</li>
<li data-name="classifieds--valuation" class="">
<i class="icon-roadtests"></i>
Road Tests & Reviews
</li>
Main Content
<main class="main-content" role="main-content">
<div class="js-classifieds--description active">
<section class="advert-description">
<p>Asteroid Grey</p>
</section>
</div>
<div class="js-classifieds-specification">
<div>
<p>Room Beige</p>
</div>
</div>
<div class="js-classifieds-reviews">
<div>
<p>Random Review</p>
</div>
</div>
I can toggle the active class on the menu and based of off that class, I would like to show my relevant section. I would then check if the data attribute of the active menu item matches the class of the item I would like to toggle and this is the bit that I am struggling with.
I have the follwing JS
var toggleStates = function() {
//Find all li[s] in .tablet--nav
var $tabletnavLi = $(".tablet--nav__Parent").find("li");
//Loop through them and take car of active class on current item
$($tabletnavLi).each(function() {
var $self = $(this);
$self.click(function() {
//Add active class to active tab
$self.addClass("active");
var activeElement = ($(".active").data().name);
//Remove from siblings - other elements on page
$self.siblings().removeClass("active");
});
});
};
Ideally I would be able to do something like:
$('.main-content > div').find(activeElement).addClass('active
section').siblings().removeClass('active-section');
Unfortunately, this does not work.
I did't see where you call toggleStates function. Well this below code should do the trick, try it out :
// hide for all section
$('.main-content > div').removeClass('active').hide();
// current click on a tag
$('.tablet--nav__Parent a').click(function () {
// remove class for all li element
$('.tablet--nav__Parent li').removeClass('active');
// cache parent element
var current = $(this).closest('li');
// get data attributes values from li element
var dataName = current.data('name');
// add active class to currenct click li element
current.addClass('active');
// remove class active from all section , and hide them
$('.main-content > div').removeClass('active').hide();
// add class to MATCHED section and show it
$('.'+dataName).addClass('active').show();
});
i hide all the sections for initial state, demo purposed. You can change it for what section should displayed first.
DEMO

Add 3 active class at once with javascript

I have this code, and eberything works fine, and also add the active class like I want.
However, it's possible when i click on href='#tab58', add active in the first three classes at once?
If I click in <a class="section_010" href='#tab58'></a>
I Want to add active in this first class at once
<a class="section_010 active" href='#tab58'></a>
<a class="section_011 active" href='#tab58'></a>
<a class="section_012 active" href='#tab58'></a>
If I click on another href, work fine (only that item add active class)
Code EXAMPLE Here
$(document).ready(function () {
$('ul.prov').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.attr('href'));
// Hide the remaining content
$links.not($active).each(function () {
$($(this).attr('href')).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).attr('href'));
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
</script>
<ul class="prov">
<a class="section_010" href='#tab58'></a>
<a class="section_011" href='#tab58'></a>
<a class="section_012" href='#tab58'></a>
<a class="section_02" href='#tab60'></a>
<a class="section_03" href='#tab61'></a>
<a class="section_04" href='#tab62'></a>
<a class="section_05" href='#tab63'></a>
<a class="section_06" href='#tab64'></a>
<a class="section_07" href='#tab65'></a>
</ul>
<div class="mapa_legenda">
<div id='tab58'> TEXT1</div>
<div id='tab60'> TEXT2</div>
<div id='tab61'> TEXT3</div>
<div id='tab62'> TEXT4</div>
<div id='tab63'> TEXT4</div>
<div id='tab64'> TEXT4</div>
<div id='tab65'> TEXT4</div>
</div>
I update this code My Updated code
It's possible, when I click in "About MHG", "Workout Programs" OR "Fitness Tips". All of them , stay active at once. (you click in one of them, and all 3 stay active).
I only want that for "About MHG", "Workout Programs" OR "Fitness Tips"
Anyone could help me please?
<ul class="navi">
<li><a class="menu2" href="#">About MHG</a></li>
<li><a class="menu3" href="#">Workout Programs</a></li>
<li><a class="menu4" href="#">Fitness Tips</a></li>
<li><a class="menu5" href="#">Contact Us</a></li>
<li><a class="menu6" href="#">Read Our Blog</a></li>
</ul>
It's simple.
Please check
http://jsfiddle.net/9nd4j/1282/
Just add this part:
$(this).closest('ul').find('li a').each(function(i){
if (i<3)$(this).addClass('active');
});
Check this example, that I edit
I add active class, on both 3 first itens like you want.
Just using:
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$('a.menu2').removeClass("active");
$(this).addClass("active");
});
$('a.menu2').click(function(){
$('a.menu2').removeClass("active");
$('a.menu').removeClass("active");
$('a.menu2').addClass("active");
});
Please check:
http://jsfiddle.net/9nd4j/1264/

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

Activate tab via external link (list based)

I am trying to activate a tab via a link e.g.#blahblah However, to do that, the tabs would have to be link based but they are list based. Can anyone tell me on how i can do it with my current setup? e.g. website.com/#tab2
JQUERY
$(document).ready(function() {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return;
}
else{
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
}
});
});
HTML
<ul id="tabs">
<li>Description</li>
<li>Reviews</li>
</ul>
<div id="content">
<div id="tab1">
</div>
<div id="tab5">
</div>
</div>
I'm pretty sure that
Discription
would work.

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

Categories

Resources