CSS only Tabs using :target
Published
•2 min read
A
I am a web developer from Navi Mumbai.
Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud.
Founder of nerul.in and gaali.in
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.
