3.5 Tab Control
The “tab control” is a very common pattern, so let’s see how it’s done in this final exercise lesson.
1.Introduction2 lessons, 04:54
4.Conclusion1 lesson, 01:08
3.5 Tab Control
Hi, welcome to lesson number 16, where I'll show you how are you can build a very simple tab controller. So this is the final result. As you can see we have three tabs, and clicking each one will toggle a different content. Now the markup is pretty straightforward, we have a ul with a class of tabs that hold the links here on the top. The active one has the class of active and then we have tab-contents which refer to these right here. Each one has an ID, tab-1, 2, 3 and so on, and the active one has a class of visible. Very simple. Now the scripts, we do something similar to the previous demo. We're listening to click events on the documents and then we're filtering them. So if we clicked on an element whose href contains tab- then we move on, otherwise we do nothing. So if the href of the element, basically, we get the attribute of the element that has been clicked. If it's not null and if it has tab- inside it, then since we're dealing with links we're going to prevent default behavior and we check. If we didn't click on an active tab, we switch tabs. We remove the active class from all the tabs and all the tab contents and we simply add it to the one, to the other one that we just clicked. That's what this line of code here is doing. Now to actually show the tab content that corresponds to the tab on the top we get elemHREF. And elemHREF is basically the href of the element we clicked. So if we click on the first element the href is tab-1. So we're getting that by ID and we're gonna get to this item. Very, very simple. And we just add the class of visible. So that's how we can create tabs. As you can see, very few lines of code and a very basic principle behind it. That was the final demo for this course. Please join me in the next lesson for the conclusion.Back to the top