Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
On occasion, you may wish to tab between blocks of content within the same web page, usually through a tab like interface where you can click on various tabs within the page, see different kinds of information without the page having to reload or make another call to the server to switch between pages. Bootstrap has a great interface for making this kind of effect. So our starting web page looks like this right now. I have a bulleted list at the top with some names, and underneath I have some text, it's just marked up with h3 for a title and a paragraph of text that appears underneath. And we can see that here inside of Dreamweaver.
So there's my bulleted list, and then underneath here's just a bunch of h3s and paragraphs. And what I'd like to do is turn this into a bunch of tabs that I can click on and see each of these artists' bios displayed individually rather than altogether on a page like a laundry list. So to make that happen, there's a couple of things that we need to do. First of all, we are going to need to do some markup here on the tabs. So we are going to start by taking this ul, and we are going to add a class of nav and nav-tabs.
And we need to apply that to all three of these links, so I am just going to highlight that, Ctrl+C or Command+C to copy, Ctrl+V or Command+V to paste, so that it now appears in all three of these links. And finally, what I need to do is connect the specific link for Constance Smith, for example, with the chunk of text that's going to be below. The links that I have up there right now are just sort of dummy links. They don't actually go anywhere. So somehow I need to differentiate between these. So I'm going to give these names, so right here with the first one I am going to call this rewington, leave the Pound sign there in the front, the second one I'll call #smith, and the third one I'd call #ta.
That section class is important because it's defining that this is the actual content for the web page here, and that's why I am using the section tag. So I'm going to go down and close that at the bottom. Then after the section tag, I'm going to add an article tag here, article with a class of tab-pane. So this article tag is going to get wrapped around what effectively is an article, the h3, and the paragraph.
So I am going to go ahead and end that article down here, and I can indent this h3 and the p because now they are inside of the article tag. So what I did is just highlighted all those lines and just hit the Tab key. So I am going to go ahead and add the same article class of tab pane to the top of each one of these little mini articles, and always of course, make sure you close your tags, and I will Tab over the content here to show that it's inside of the article.
And so what we're doing here is we are connecting the link at the top with #rewington to an ID down here underneath, the ID of rewington. We're connecting these two together. So whatever you called your links up here on the top, you're going to need to take that and identify them as IDs beneath inside of these articles. So I'll go ahead and add an ID of smith and further down an ID of ta.
And one final thing that we're going to need to do, since Riley Rewington is the tab that I want to have come up by default when the page loads, I have already specified that up here on line 18 as having an li with a class of active. I'm also going to need to identify which piece of content is going to come up by default underneath, and that of course is the article here about Riley Rewington. So I'm going to indicate that that should come up when the page loads by adding a class of active to this article.
So we have tab-pane and active here for the article class, while the other article classes are just tab-pane. All right! Now that we've got all this markup in place, go ahead and save your page, Ctrl+S or Command+S to save, and Refresh the page in Firefox, and you'll see that we have tabs now going across the top of the page. When I click on Constance Smith, you can see that her information loads here inside of the tab. The little dotted box I have up there because I have selected it at the moment. If I click away from that tab, that box goes away, and here's Xhou Ta, and you'll see that the bio for him is listed here as well. So we can click around in these tabs.
Notice that the URL for the page never changes. We are just displaying different sections of the page here inside of these tabs. So this is a really handy effect. I see it in use on a number of websites these days. It's a little bit more interesting than those long laundry lists or skipping things down the page we used to do back about 10 years ago. This is a lot more fun, a lot more interactive, and certainly more attractive. Some of you might be wondering about Search Engine Optimization now that I've separated these out between the tabs, and the answer to that is Search Engine Optimization should not be impacted at all. Why is that? Well, if you take a look at the raw HTML for this web page, the raw HTML is all spelled out right there in the web page.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.