Implementing a tab widget
The structure of the underlying HTML elements on which tabs are based is fairly rigid, and widgets require a certain number of elements for them to work. The tabs must be created from a list element (ordered or unordered) and each list item must contain an <a>
element. Each link will need to have a corresponding element with a specified id
that is associated with the href
attribute of the link. We'll clarify the exact structure of these elements after the first example.
In a new file in your text editor, create the following page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tabs</title> <link rel="stylesheet" href="development-bundle/themes/base/jquery.ui.all.css"> <script src="js/jquery-2.0.3.js"></script> <script src="development-bundle/ui/jquery.ui.core.js"> </script> <script src="development-bundle/ui/jquery.ui.widget.js"> </script> <script src...