Tabs Basic Sample

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!

Google Chrome 44.0

Mozilla Firefox 40

Internet Explorer 11

Safari 8.0

Opera 32




Code:
<div class=\"tabbed\">
<div class=\"tabs\"><a href=\"http://mypost.io/post/tabs-basic-sample#chrome\">Chrome</a><a href=\"http://mypost.io/post/tabs-basic-sample#mozilla\">Mozilla</a><a href=\"http://mypost.io/post/tabs-basic-sample#ie\">Internet Explorer</a><a href=\"http://mypost.io/post/tabs-basic-sample#safari\">Safari</a><a href=\"http://mypost.io/post/tabs-basic-sample#opera\">Opera</a></div>
<div id=\"chrome\" class=\"tab\">
<p>Google Chrome 44.0</p>
</div>
<div id=\"mozilla\" class=\"tab\">
<p>Mozilla Firefox 40</p>
</div>
<div id=\"ie\" class=\"tab\">
<p>Internet Explorer 11</p>
</div>
<div id=\"safari\" class=\"tab\">
<p>Safari 8.0</p>
</div>
<div id=\"opera\" class=\"tab\">
<p>Opera 32</p>
</div>
</div>
CSS:
div.tabbed {
position: relative;
top: 40px;
left: 40px;
}

div.tabs a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: smaller;
color: #e0e0e0;
background-color: #404040;
border: thin solid black;
margin-right: 2px;
padding: 0px 2px;
-moz-border-radius: 5px 5px 0px 0px;
}

div.tab {
display: none;
height: 250px;
border: thin solid black;
-moz-border-radius: 0px 0px 5px 5px;
text-align: center;
}

div.tab:target {
display: block;
}

:target div.tab {
display: block;
}
:target div.tab + div.tab{
display: none;
}