An example of changing the contents of a content box out with jQuery while clicking different tabs above.

Below the contents of the actual divs are populated from the C# side upon the Page_Load event of a web form, but you may imagine the divs hold whatever you'd like really. The first of four tabs starts as styled differently as if to say "This tab is selected and current." Comparably, the first of four divs is not hidden while the others are. You can probably guess what the snippetSelection and displaynone classes do, eh?

<ul id="snippetNavigation">
   <li class="snippetSelection">Description</li>
   <li>ASP.NET</li>
   <li>JavaScript</li>
   <li>C#</li>
</ul>
 
<section id="snippets" style="height:440px;">
   <div id="Description" runat="server"></div>
   <div id="Markup" class="displaynone" runat="server"></div>
   <div id="JavaScript" class="displaynone" runat="server"></div>
   <div id="CodeBehind" class="displaynone" runat="server"></div>
</section>
 
<script type="text/javascript" language="javascript">
   $('#snippetNavigation li').bind('click', function () {
      var outerCounter = 0;
      var options = $("#snippetNavigation li");
      while (outerCounter < options.length) {
         var option = options[outerCounter];
         if (options[outerCounter] == this) {
            var innerCounter = 0;
            var snippets = $("#snippets div");
            while (innerCounter < snippets.length) {
               var snippet = snippets[innerCounter];
               if (outerCounter == innerCounter) {
                  console.log(snippet);
                  $(snippet).attr("class", "");
               } else {
                  $(snippet).attr("class", "displaynone");
               }
               innerCounter++;
            }
            $(option).attr("class", "snippetSelection");
         } else {
            $(option).attr("class", "");
         }
         outerCounter++;
      }
   });
</script>