Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Now we're going to activate the tabs so our users can click on them. So it's still inside of the document ready function, make sure you're outside of the each function for the panel_container. Let's hit a few returns. Start with a dollar sign, another set of parentheses, tick marks inside for a string literal, .sp inside of the string literal, space .tabs, space, span.
Outside of the parentheses .each, another set of parentheses and a semicolon. Inside of the parentheses for each, type function, parentheses, brackets. Let's split that open on the brackets. So for each span we find inside of the tabs container, dollar sign, parentheses, type (this) inside of the parentheses, .on, beginning and ending parentheses, semicolon, two tick marks inside of the parentheses for on, type click. Outside of the string literal but still inside of the parentheses for on, comma, space function, another set of parentheses, another set of brackets. Let's split that open, and then inside we're going to run a custom function, changePanels, beginning and ending parentheses, then a semicolon.
So this changePanels function is a custom function that we haven't created yet, but each time you click on an individual span, we're going to run this particular changePanels function. Now, in addition to calling the changePanels function, we want to send along the index of the item that was clicked on. So inside of the parentheses for changePanels, we're going to send this parameter. So we'll type a dollar sign, beginning and ending parentheses. Inside of the parentheses I'll type this. Outside of the parentheses for this but still inside of the parentheses for changePanels, we'll type .index and another set of parentheses.
So jQuery will keep track of the individual item that was clicked and then reference its own index, and then it will send that along with the changePanels instruction to the custom function that we will write in the next movie.
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.