Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Now to be able to lock onto individual tabs and panels, to custom style them, we're going to need to add some classes onto those items. So in Dreamweaver, in your index.html file, let's come over to Code view, let's scroll up to the top of the document, and let's add some custom classes onto individual items. So first, let's start with the individual tabs. So for the very first span, which is for the iPad course, inside of span, let's add class=ipad.
Let's arrow over to the span for Video, space, add a class of video, and then lastly let's come over to the span for Photography and add a class of photo. So now we have a custom class on each tab. Let's scroll down inside of the panel_container, inside of panels, and let's find each individual panel. So for class panel for the first one, hit a space.
Let's add a second-class onto here called ipad. Let's scroll down. Let's find the second one. This one is video. Then let's scroll down and find the third one, space, photo. So at this point, we have custom classes on all of the tabs and all of the panels. Next, we can create some CSS rules to target these individual items.
There are currently no FAQs about Create a Sliding Tabbed Panel with jQuery and Dreamweaver.
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.