Add Tabbed Navigation
Prev Chapter 9. Exercises Next

Add Tabbed Navigation

Open the file /exercises/index.html in your browser. Use the file /exercises/js/tabs.js. Your task is to create tabbed navigation for the two div.module elements. To accomplish this:

  1. Hide all of the modules.

  2. Create an unordered list element before the first module.

  3. Iterate over the modules using $.fn.each. For each module, use the text of the h2 element as the text for a list item that you add to the unordered list element.

  4. Bind a click even to the list item that:

    • Shows the related module, and hides any other modules

    • Adds a class of "current" to the clicked list item

    • Removes the class "current" from the other list item

  5. Finally, show the first tab.


Prev Up Next
Reveal Hidden Text Home Create Dropdown Menus