Join Chris Converse for an in-depth discussion in this video Creating the HTML containers for the tabs, part of Creating a Sliding Tabbed Panel with jQuery.
Now, to add elements that are going to become our tabs, let's come into the div with the …tabs class, split that open, and we want to add HTML elements into here that will become …the tabs that users can click on. …So sometimes you might see other plug-ins that do panels for you. …We'll use things like anchor links or unordered lists. …I prefer to use span tags, since they require the least amount of CSS to style. …So let's start by adding a span tag. …After you end the span tag, the first panel is going to be iPad.…
This is going reference one of my iPad courses. …Let's hit a Return. …Let's add another span. …This one is going to be for Video. And then let's add one more. This one will be for Photography. …So now that we have our tab elements in place, next we'll work on the containers for the panels.…
- Creating the main panel and tab containers
- Adding content to the containers
- Adding CSS styles to the text and tabs
- Adding the jQuery $(document).ready() function
- Assigning click events to the tabs
- Setting an autostart on page load
- Creating custom graphics for the panels
- Assigning custom classes to the HTML elements
Skill Level Intermediate
1. Creating the HTML Containers
2. Styling the Tabs and Panels
4. Creating Custom Graphics
5. Customizing the Panel Styles
6. Adding Progressive Enhancement Techniques
Where to go from here1m 15s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.