Tabbed view of pages using css and javascript

Question

I want to create a tabbed view of pages similar to that of the profile page of stack overflow, as can be seen in the image below.

I have been able to create a tabbed interface, but I am unable to remove the border below the tab, because the border has been actually given to the div below. If I give the border to the tab, then I can't extend the border over the area where there is not a tab.

Here is the html that I am using

    <div id="centerDiv">
        <div id="centeredMenu">
            <ul class="tabs">
                <li><a class="active" href="#">Questions</a></li>
                <li><a href="#">Blogs</a></li>
                <li><a href="#">Posts</a></li>
            </ul>
        </div>

    </div>

    <div style="clear:both;"></div>

    <div class="favContentBox">
     <!-- The content goes here -->
    </div>

    <div class="favContentBox">
     <!-- The content goes here -->
    </div>

    <div class="favContentBox">
     <!-- The content goes here -->
    </div>

I have as many favContentBox as there are the ul li elements. And the javascript is

$(document).ready(function(){

    var currentTab = 0; 

    function openTab(clickedTab) {
        var thisTab = $(".tabs a").index(clickedTab);
        $(".tabs li a").removeClass("active");
        $(".tabs li a:eq("+thisTab+")").addClass("active");
        $(".favContentBox").hide();
        $(".favContentBox:eq("+thisTab+")").show();
        currentTab = thisTab;
    }

    $(".tabs li a").click(function() { 
        openTab($(this)); 
        return false; 
    });

    $(".tabs li a:eq("+currentTab+")").click()

});

And the css goes like this

.favContentBox
{
    border:1px solid #808080;
    padding-left:20px;
    padding-right:20px;
    min-height: 500px;

}

.tabs
{
    margin:0 0 0 0;
    padding:0 0 0 0;
    left:50%;
    text-align:center;
    clear:left;
    position:relative;
    float:left;
}
.tabs li 
{
    list-style: none;
    float: left; 
    right:50%;
    display:block;
    position:relative;
}

.tabs li a
{
    display: block;
    color:black;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    width:100px;
    padding: 5px 0 5px 0;
    border-left: 1px solid #808080;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    margin-left:20px;
    background-color:#F0F0F0;
}

Answer 1

Add a white bottom border to the tab and make the tab one pixel smaller than its container (to account for the top border). Here's an all CSS solution for the tab hovering.

Demo: http://jsfiddle.net/ThinkingStiff/sCgMg/

HTML:

<ul id="tabs"><!--
    --><li class="tab">summary</li><!--
    --><li class="tab selected">answers</li><!--
    --><li class="tab">questions</li><!--
    --><li class="tab">tags</li><!--
--></ul>

CSS:

#tabs {
    border-bottom: 1px solid #666666;
    font: bold 15px/15px Helvetica, Tahoma, Arial;
    height: 30px;  
    margin: 0;
    padding: 0; 
    padding-left: 10px; 
}

.tab {
    color: #777;
    cursor: pointer;
    display: inline-block; 
    height: 23px; 
    font-size: 13px;
    line-height: 13px;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 8px;
    text-align: center;
    vertical-align: top;
    width: 80px; 
}

.tab:hover {
    border: 1px solid #666666;
    border-bottom: 1px solid white;
    height: 22px;
    margin-top: 5px;
    padding-top: 2px;
    width: 78px; 
}

.selected {
    border: 1px solid #666666;
    border-bottom: 1px solid white;
    color: black;    
    font-size: 15px;
    line-height: 15px;
    padding-top: 6px;
    width: 78px; 
}

.selected:hover {
    height: 23px;
    margin-top: 0;
    padding-top: 6px;
    width: 78px; 
}

Script:

$( ".tab" ).click( function () {

    $( ".selected" ).removeClass( "selected" );
    $( this ).addClass( "selected" );

} );

Output:

Answer 2

(Don't just copy and paste! Read the explaination below first!)

HTML:

<ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
</ul>
<div class="content-boxes">
    <div class="content1">Content 1</div>
    <div class="content2">Content 2</div>
    <div class="content3">Content 3</div>
</div>

CSS:

ul li {
    /* I've left out all the floating and other obvious stuff,
    since you didn't ask for that */
    position: relative;
    top: 1px;
    background-color: #fff;
    border: solid 1px #808080;
    border-bottom: none;
    z-index: 2;
}
.content-boxes>div {
    position: relative;
    z-index: 1;
}

The essence of this code is:

1. Moving the tabs down by 1 pixel while leaving the content boxes' positions as they are with `position: relative; top: 1px;`
2. Giving the tabs a background color to cover up the content boxes' borders
3. z-index the tabs on top of the content boxes with `position: relative; z-index: 1/2;` (z-index only works on positioned elements)

I didn't test the code, so you will have to work out the details on your own. For example, this code would push all tabs down instead of just the active one. But I think you get the basic approach.

Hope this helps.