Join Chris Converse for an in-depth discussion in this video Assigning custom classes to the HTML elements, part of Creating a Sliding Tabbed Panel with jQuery.
Now, to start creating some custom styles for individual tabs and panels, let's come back …to our index.html file. …Inside the file, let's scroll down and find the div with the class of tabs. …We have our three spans inside of here. …So inside of the first span, let's hit a space and add a class. …We are going to add a class of iPad to the first one. …For the second one, we're going to add a class of Video, and for the third one we will add …a class of Photo.…
Next, we're going to scroll down inside the panels. …So find the very first panel. Let's hit a space. …We're going to add a second class onto this. …So class="panel ipad." …I'll scroll down and find the second one "panel video." I'll scroll down and find the third …one. This will be "panel photo." Then hit Save. …Now with the custom classes in place, next we can work on creating custom styles to target these items.…
- 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
PHP with MySQL Beyond the Basicswith Kevin Skoglund10h 26m 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?
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.