Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Chris Feltus
3,970 PointsTabs Project (code pen)
I have a small project that I am working on that creates tabs in the browser, that allows the user to cycle through them. Here is the codepen http://codepen.io/bluehabit/pen/KweBLY
The .selected class has some custom formatting that makes it a different color when selected.
problem: Once the class .selected is added using .addClass(), it is never removed despite my best efforts. As a result the tab colors remain permanently changed. Perhaps there is a more elegant way of doing this than using the .addClass() method. Perhaps I need an if statement? Here is a mock up of what I am trying to accomplish
2 Answers
Dave McFarland
Treehouse TeacherHi Chris Feltus
All you need to do is REMOVE the class from all of the tabs, before applying the class to the clicked tab. Inside the click handler you've written, just add a line BEFORE the addClass() line to remove the 'selected' class from all the li tags within the tabs-menu:
$('.tabs-menu li').removeClass('selected');
$(this).parent().addClass('selected');
Garrett Sanderson
12,735 PointsHi Chris,
I have made something similar on my codepen.
Hopefully this can help you out.