CODEWITHSUNDEEP
jquery
soum
soum

Reputation: 1159

content of the tabs are displaying incorrectly

I am trying to build a simple tab. I cant figure out what am I doing wrong here. I need some help in debugging this. Here is my JS. The contents dont show up correctly.

jQuery('.containers .tabs li:first-child a').addClass('active');
jQuery('.containers').each(function () {
    jQuery(this).find('.container:first').addClass('active');
});
var forClick = jQuery('.containers .tabs li a');
jQuery(forClick).click(function () {
    var title = jQuery(this).attr('class');
    var parent = jQuery(this).closest('.containers');
    parent.find('.active').removeClass('active');
    jQuery(this).addClass('active');
    parent.find('.' + title + 'Content').addClass('active');
});

if (jQuery(forClick).is(':empty')) {
    jQuery('.containers').css('display', 'none');
}

Here is my fiddle http://jsfiddle.net/sghoush1/4sEMw/2/

Note: No plugins can be used such as JQuery UI etc.

Upvotes: 0

Views: 41

Answers (1)

Daniel
Daniel

Reputation: 13122

You have multiple issues:

  • var title = jQuery(this).attr('class'); followed by parent.find('.' + title + 'Content').addClass('active');

When the button is active, the class attribute ends up being "tab1 active", which when you attempt to use it as a selector results in ".tab1 activeContent"

To address that, you could put something like if (jQuery(this).hasClass('active')) return; in your click event.

  • <div class="container tab1Content" id="product2_nw">

You assigned the wrong tabContent class to your second container.

All that being said: Why make your own? I'd recommend using an existing tab plugin like jQuery UI's.

Upvotes: 1

Related Questions