Creating Tabs


I. Formatting Tabs

HTML for our version of tabs, Formatting Tabs,  
which had CSS styles
for tabs but no tab behavior. The HTML provided in the skeleton
for the assignment had the form


  <ul id=TabExample>
    <li class=selected><a href=#tabpage-1><span>First Tab</span></a></li>
    <li><a href=#tabpage-2><span>Second Tab</span></a></li>
    <li><a href=#tabpage-3><span>Third Tab</span></a></li>
  </ul>
  <!--    content of the tab pages  -->
  <div class='tabpage' id=tabpage-1>
  <h2>First Tab</h2>
tabpage content here
   <!-- end tabpage-1 --> 
  </div>
  <div class='tabpage paneHide'  id=tabpage-2>
tabpage content here
.........


The basic structure is a list of links followed by a set of <div>s.
There is one <div> (a tabpage) for each <li> (the tab itself)
 in the list. 

We must associate each <li> with exactly one <div>. To do this,
the href of the tab must match the id of the
corresponding tabpage. 

Additionally, only one tab can be displayed at a time so
exactly one tab must have class=selected. 
Each of the <div>s corresponding to the other, unselected tabs
must have class=paneHide.

This is not a particularly complicated structure, but the author
of the page (a human or the backend software creating the page)
must adhere strictly to these guidelines. Any small deviation and
the tabs will not format nicely or work properly.



II. Working Tabs

The jQuery code for Working Tabs uses the same HTML shown above.
Clicking on a tab:

i) "Moves" the "selected" class to the tab just clicked.
ii) The previously shown tabpage is now assigned class=paneHide
ii) paneHide is removed from the tabpage corresponding to the
tab that was clicked.




III. Creating Tabs

Input HTML

<div class=tabReady>
  <div>
    <h2>News</h2>
    <p>Content of first tab page. Lorem ipsum dolor sit amet, </p>
    </div>
  <div>
    <h2>Sports</h2>
    <p>Contents of second tab page. ... </p>
    </div>
.....

Assumptions
1. The children of '<div class=tabReady' are only
divs.
2. Each of the children divs has at least one <hn>
element.
3. The first heading in the div is used as the label
for the tab.


Output HTML

  <ul class=tabs-nav>
    <li class=selected><a href=#News>News</a></li>
    <li><a href=#sports>Sports</a></li>
    <li><a href=#weather>Weather</a></li>
  </ul>

  <div class='tabpage' id=news>
    <h2>News</h2>
    <p>Content of first tab page. Lorem ipsum dolor sit amet