javascript - Adding a "current" class to a clicked element and removing it when clicking on another element? -
i trying add class of "current" div jquery , remove class when different div clicked. far have "current" class being added, not sure how remove "current" class div , apply new div clicked.
here's javascript:
$(document).ready(function() { $('#images div').click(function() { $(this).addclass('current'); $('.bios .active').hide().removeclass('active'); $('.bios div').eq($(this).index()).show().addclass('active'); }); }); here's html:
<div id="images"> <div><div class="name">name 1</div></div> <div><div class="name">name 2</div></div> <div><div class="name">name 3</div></div> </div> <div class="bios"> <div>bio 1</div> <div>bio 2</div> <div>bio 3</div> </div> so want "current" class applied image in div that's being clicked , remove class previous divs may have had it. thank you.
just remove class on it's siblings, being specific avoids confusion when decide use .current somewhere else in dom.
$(document).ready(function() { $('#images div').on('click', function() { $(this).addclass('current').siblings().removeclass('current'); $('.bios .active').hide().removeclass('active'); $('.bios div').eq($(this).index()).show().addclass('active'); }); });
Comments
Post a Comment