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
Shams Nelson
2,888 PointsCreate an HTML page with Tabs
I found this tutorial, but it seems to just basically be a menu, with each tab being a different page (different url):
http://webdesign.about.com/od/examples/l/ztab1.htm
I want to do something similar, but have the tabs stay withing the SAME exact page/URL.
Is this possible?
4 Answers
James Barnett
39,199 PointsYou can't do it with HTML. However, you can do it with JQuery.
Rose Hurst
5,658 PointsI haven't looked at the tutorial, but I would think it is possible. You would just need to use anchor ID's. There is a section in the html deep dive that explains how to do that, if you haven't come across it already.
One thing to mention though if you are considering using the tabs as a menu on a one page layout, if the menu is not going to remain fixed is that you should add a "back to the top" function for each section. This avoids having the user having to do a lot of scrolling.
robrravens
6,140 PointsHi Shams,
A fairly easy way of including a tab interface for displaying content on a single page is to use jQuery, or more specifically jQuery UI Tabs - https://jqueryui.com/tabs/
This effect can also be done with native javascript or also other libraries. I've found this to be the simplest method given the widespread use of jQuery.
Shams Nelson
2,888 PointsAwesome, thanks for the help guys!