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>