CSS only Tabs using :target

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

<!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.

CSS only Tabs using :target

Comments

More from this blog

@supports API

Using the :has selector to display full with of a container

first-of-type

Text Input Validation & Error without JavaScript

Mega Menu using CSS only

Command Palette

Comments

More from this blog