# CSS only Tabs using :target

Its highly unlikely that tabs using _only_ CSS would replace JavaScript based ones.  
[![tabs](https://cdn.hashnode.com/res/hashnode/image/upload/v1653020098942/iS2Xhc8d-.png)](http://css.co.in/examples/css-tabs.html#item-1)

    <!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](http://css.co.in/examples/css-tabs.html#item-1).
