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.

enter image description here

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;
}

Could you apply the white border to the tab and then use a -1 margin to pull it down over the div below? — dougajmcdonald
– dougajmcdonald, Commented Jan 6, 2012 at 10:08
@dougajmcdonald: I tried out what you suggested but that didn't help. — Sachin
– Sachin, Commented Jan 6, 2012 at 10:14

ThinkingStiff · Accepted Answer · 2012-01-06 11:08:36Z

2

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:

enter image description here

edited Jan 6, 2012 at 11:08

answered Jan 6, 2012 at 10:15

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ThinkingStiff Over a year ago

@Sachin I updated the demo and code to do the hovering with CSS. Try it now.

Sachin Over a year ago

Thanks a lot, the new hover effect is totally cool and makes it like Stackoverflow... But I would like to stick to the previous one only otherwise it would look too similar Thanks

Rudolph Gottesheim · Accepted Answer · 2012-01-06 10:23:10Z

1

(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:

Moving the tabs down by 1 pixel while leaving the content boxes' positions as they are with `position: relative; top: 1px;`
Giving the tabs a background color to cover up the content boxes' borders
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.

answered Jan 6, 2012 at 10:23

Rudolph Gottesheim

1,7111 gold badge17 silver badges31 bronze badges

1 Comment

Sachin Over a year ago

Thanks a lot for the solution and explanation but the one given above also worked so I just used that

Collectives™ on Stack Overflow

Tabbed view of pages using css and javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related