jquery - content of the tabs are displaying incorrectly -
i trying build simple tab. cant figure out doing wrong here. need in debugging this. here js. contents dont show 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 fiddle http://jsfiddle.net/sghoush1/4semw/2/
note: no plugins can used such jquery ui etc.
you have multiple issues:
var title = jquery(this).attr('class');
followedparent.find('.' + title + 'content').addclass('active');
when button active, class attribute ends being "tab1 active"
, when attempt use selector results in ".tab1 activecontent"
to address that, put if (jquery(this).hasclass('active')) return;
in click event.
<div class="container tab1content" id="product2_nw">
you assigned wrong tabcontent
class second container.
all being said: why make own? i'd recommend using existing tab plugin jquery ui's.
Comments
Post a Comment