Extending jQuery to Create Tabs
Next, within the HTML body, I created a DIV with a meaningful id value of content. Within the DIV I added an unordered list, with one list element for each tab. Each list item is also a link to a DIV to follow, where the actual content for that tab is found. It begins like so:
<div id="content"> <ul> <li><a href="#home"><span>Home</span></a></li> <li><a href="#flotsam"><span>Flotsam</span></a></li> <li><a href="#jetsam"><span>Jetsam</span></a></li> <li><a href="#foofarah"><span>Foofarah</span></a></li> </ul> <div id="home"> This is the initial content. It's very exciting stuff. </div> <div id="flotsam">
Once the HTML that defines the content has been added, the tabs are created by selecting the content DIV and applying the tabs() method to it:
Of course, that line of code is executed within the main setup function (again, see the downloaded code for clarification).