Tabbed Control

// Tabbed.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Tabbed.ascx.cs" Inherits="TabbedEmployeesFilter" %>

<script type="text/javascript">
$(function() {
    var selectTabId = '#<%# selectdTab.Value %>';
    var tabbedWindows = $('div#tabs > .tabbedWindow');
    tabbedWindows.hide().filter(selectTabId).show();
    $('div#tabs ul.tabNavigation a').click(function() {
        tabbedWindows.hide();
        tabbedWindows.filter(this.hash).show();
        $('div#tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(selectTabId).click();
});
</script>

<div id="tabs" class="tabnavigation">
    <asp:HiddenField runat="server" ID="selectdTab" Value="tabProjects" />
    <ul class="tabNavigation">
        <li><a href="#tabProjects" class="selected"><span>Projects</span></a></li>
        <li><a href="#tabPositions"><span>Positions</span></a></li>
        <li><a href="#tabSkils"><span>Skills</span></a></li>
    </ul>
    <div style="clear: both"></div>
</div>
<div id="tabs" class="tabcontent">
    <div class="tabbedWindow" id="tabProjects" style="alignment-baseline:central; width: 99%">
        <h1>Projects</h1>
    </div>

    <div class="tabbedWindow" id="tabPositions" style="alignment-baseline:central; width: 99%">
        <h1>Positions</h1>
    </div>

    <div class="tabbedWindow" id="tabSkils" style="alignment-baseline:central; width: 99%">
        <h1>Skills</h1>
    </div>
</div>

// Tabbed.ascx.cs
using System;
using System.Web.UI.HtmlControls;

public partial class TabbedEmployeesFilter : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HtmlLink cssLink = new HtmlLink();
        cssLink.Href = ResolveUrl("~/Styles/tabs.css");
        cssLink.Attributes["rel"] = "stylesheet";
        cssLink.Attributes["type"] = "text/css";
        Page.Header.Controls.Add(cssLink);

        Page.DataBind();
    }
}

// Tabs.css
/* STYLE */

.tabnavigation{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: normal;
    color: #000;
    /*border-left: 1px #dbe1e6 solid;
    border-right: 1px #dbe1e6 solid;*/
}

.tabcontent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    /*border: 1px #dbe1e6 solid;*/
    background-color: #FFF;
}

#tabs ul.tabNavigation{
    /*background:url("tabyahoograd.gif") transparent repeat-x;*/
    /*border-top: 1px #dbe1e6 solid;*/
    border: 1px #dbe1e6 solid;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 35px;
}

#tabs ul.tabNavigation li{
    float: left;
    padding: 0;
    margin: 0;
}

#tabs ul.tabNavigation a{
    display: block;
    padding: 10px 5px 10px;
    color: #16387c;
    text-decoration:none;
}

#tabs ul.tabNavigation a.selected{
    /*background:url("tabyahoogradsel.gif") transparent repeat-x;*/
    font-weight: bold;
    background-color: #57708a !important;
    color: #FFF;
    border: 1px #2d4458 solid;
    padding: 9px 5 9px;
}

#tabs ul.tabNavigation a.selected span{
    /*background:url("tabyahoogradselarrow.gif") transparent no-repeat bottom center;*/
    font-weight: bold;
    background-color: transparent !important;
    padding-bottom: 18px;
    position: relative;
    top: 0px;
}

#tabs ul.tabNavigation a span{
    padding: 0 10px;
}

.tabbedWindow{
    width: 99.9%;
    padding: 5px;
}

#tabs ul.tabNavigation a:hover{
    background-image: none;
    color:#16387c;
    text-decoration: underline;
}

#tabs ul.tabNavigation a:hover.selected{
    /*background:url("tabyahoogradsel.gif") transparent repeat-x;*/
    font-weight: bold;
    background-color: #57708a !important;
    color: #FFF;
    border: 1px #2d4458 solid;
    padding: 9px 5 9px;
    text-decoration: none;
}