<div class="tabStrip">
    <ul>
       <li><a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1">TabOne</a></li>
       <li><a href="javascript:openTab(2);" class="tabLink" id="tabLink2">TabTwo</a></li>
       <li><a href="javascript:openTab(3);" class="tabLink" id="tabLink3">TabThree</a></li>
    </ul>
</div>

<div class="tabContentActive" id="tabContent1">
    This is sample tab content (1).
</div>

<div class="tabContent" id="tabContent2">
    This is sample tab content (2).
</div>

<div class="tabContent" id="tabContent3">
    This is sample tab content (3).
</div>

<script type="text/javascript" language="javascript">
    var activeTab = 1;
    function openTab(tabId) {
       // reset old tab and content
       document.getElementById("tabLink"+activeTab).className = "tabLink";
       document.getElementById("tabContent"+activeTab).className = "tabContent";
       // set new tab and content
       document.getElementById("tabLink"+tabId).className = "tabLinkActive";
       document.getElementById("tabContent"+tabId).className = "tabContentActive";
       activeTab = tabId;
    }
</script>

.tabStrip ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.tabStrip li {
    margin: 0 2px 0 0;
    list-style-type: none;
    float: left;
}
.tabLink {
    display: block;
    text-decoration: none;
    padding: 5px;
    background: #e8e8e8;
    border: #dadada solid;
    border-width: 1px 1px 0 1px;
    color: #8a8a8a;
}
.tabLinkActive {
    display: block;
    text-decoration: none;
    padding: 5px;
    background: #e0e0e0;
    border: #c0c0c0 solid;
    border-width: 1px 1px 0 1px;
    color: #0066ff;
}
.tabContent {
    display: none;
}
.tabContentActive {
    display: block;
    clear: both;
    background: #f0f0f0;
    border: 1px #dedede solid;
    padding: 10px;
}