CSS only Tabs using :target

Its highly unlikely that tabs using only CSS would replace JavaScript based ones.
tabs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>CSS Tabs</title>
<style type="text/css">
.css-tabs
{
    position:relative;
    text-align:center; /* This is only if you want the tab items at the center */
}
.css-tabs ul.menu
{
    list-style-type:none;
    display:inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.menu > li
{
    display:block;
    float:left;
}
.css-tabs ul.menu li > a
{
    color:#000;
    text-decoration:none;
    display:block;
    text-align:center;
    border:1px solid #808080;
    padding:5px 10px 5px 10px;
    margin-right:5px;
    border-top-left-radius:5px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:5px;
    border-top-right-radius:5px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:5px;
    -moz-user-select:none;
    cursor:pointer;
}
.css-tabs ul.menu li > div
{
    display:none;
    position:absolute;
    width:100%;
    left:0;
    margin:-1px 0 0 0;
    z-index:-1;
    text-align:left;
    padding:0;
}
.css-tabs ul.menu li > div > p
{
    border:1px solid #808080;
    padding:10px;
    margin:0;
}
.css-tabs ul.menu li > a:focus
{
    border-bottom:1px solid #fff;
}
.css-tabs ul.menu li:target > a
{
    cursor:default;
    border-bottom:1px solid #fff;
}

.css-tabs ul.menu li:target > div
{
    display:block;
}
</style>
</head>
<body>
<div id="tab2" class="css-tabs">
    <ul class="menu">
    <li id="item-1">
        <a href="#item-1">Tab 1</a>
        <div><p>Tab Content 1</p></div>
    </li>
    <li id="item-2">
        <a href="#item-2">Tab 2</a>
        <div><p>Tab Content 2</p></div>
    </li>
    <li id="item-3">
        <a href="#item-3">Tab 3</a>
        <div><p>Tab Content 3</p></div>
    </li>
    <li id="item-4" title="click for Tab 4">
        <a href="#item-4">Tab 4</a>
        <div><p>Tab Content 4</p></div>
    </li>
    </ul>
</div>
</body>
</html>

I think its safe to say that its a real annoyance when the browser re-positions the page when a fragment (named anchor) link is clicked. We don’t want the page moving up on clicking on a tab button. Example.

Category : CSS3 . Tags : .

11 Responses to CSS only Tabs using :target

  1. Ankita says:

    Thanks 🙂

  2. Júnior Mendonça says:

    Usefull:

    .tab#tabControl { display:block; }
    .tab:not(:target) { display:none; }
    .tab:target ~ #tabControl { display:none; }

  3. Fachrur Rozi says:

    Thank html & css code nya brada

  4. GUberX says:

    too bad that its not displaying first tab right away… until you click on the tab

  5. craigwayne01 says:

    Out of all the CSS Tabs I’ve seen, this is the most simplest and easiest to understand AND USE! Nice Work!

  6. patil07 says:

    A simple and easy CSS tool…. thanks for sharing.

    This seems to work as expected on Google Chrome but creates only ‘blocks’ for each of the tab headers and doesn’t show the contents, even if the respective tab is clicked.

  7. how to move in to next tab using Tab key

  8. Anjanesh says:

    Bheesham : Press TAB and ENTER. It’ll highlight that tab’s content.

  9. but i want using on only TabKey

Leave a Reply