Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:500,700' rel='stylesheet' type='text/css' />
<!--[if gte IE 7]><!-->
<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'fdc2c422-ae8d-414c-a5bb-68c389e4688d'});</script>
<!--<![endif]-->
<link rel="stylesheet" media="all" type="text/css" href="../styles/default.css" />
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-tabbed-pages.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.hiddenTarget {display:none; position:fixed;}
.tabbedPages {position:relative; margin:50px 0;}
ul.tabs {padding:0; margin:0; list-style:none; float:left; position:relative; z-index:100;}
ul.tabs li {float:left; margin-right:2px;}
ul.tabs li a {display:block; font:normal 12px/30px arial, sans-serif; border:1px solid #aaa; border-radius:5px 5px 0 0; background:#69c; padding:0 20px; text-decoration:none; color:#fff;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}
.tabcontent {float:left; width:700px; padding:20px; border:1px solid #aaa; border-radius:0 5px 5px 5px; background:#fff; position:relative; z-index:10; display:none; clear:left; top:-1px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}
.tabcontent p {padding:0 0 5px 0; margin:0; font:normal 12px/20px arial, sans-serif; color:#333;}
.tabcontent h4 {padding:0 0 10px 0; margin:0; font:bold 14px/25px arial, sans-serif; color:#000;}
.tabcontent img {border:1px solid #444; display:block; float:left; margin:0 20px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
/* change the tab to selected style */
ul.tabs li a.default,
#tab1:target ~ .tabbedPages .tabs li a.default,
#tab2:target ~ .tabbedPages .tabs li a.tab2,
#tab3:target ~ .tabbedPages .tabs li a.tab3,
#tab4:target ~ .tabbedPages .tabs li a.tab4,
#tab5:target ~ .tabbedPages .tabs li a.tab5 {background-color:#fff; border-bottom:1px solid #fff; color:#000;}
/* show the tab content */
div.default,
#tab1:target ~ .tabbedPages div.default,
#tab2:target ~ .tabbedPages div#view2,
#tab3:target ~ .tabbedPages div#view3,
#tab4:target ~ .tabbedPages div#view4,
#tab5:target ~ .tabbedPages div#view5 {display:block;}
/* reset the unclicked tabs to default */
#tab2:target ~ .tabbedPages .tabs li a.default,
#tab3:target ~ .tabbedPages .tabs li a.default,
#tab4:target ~ .tabbedPages .tabs li a.default,
#tab5:target ~ .tabbedPages .tabs li a.default {background-color:#69c; border:1px solid #888; color:#fff;}
/* hide the default tab when selecting other tabs*/
#tab2:target ~ .tabbedPages div.default,
#tab3:target ~ .tabbedPages div.default,
#tab4:target ~ .tabbedPages div.default,
#tab5:target ~ .tabbedPages div.default {display:none;}
.clear {clear:left;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
/* fix to remove the back button history - Firefox, Chrome and Safari */
$(document).ready(function () {
$("a.tabpages").click(function () {
page = $(this).attr('href');
if ($.browser.msie && $.browser.version>8 || !$.browser.msie)
{
url = window.location.href.split('#')[0];
text = url + page;
history.replaceState({}, "", text);
}
});
});
</script>
</head>
<body id="www-cssplay-co-uk" class="demos">
<b id="tab1" class="hiddenTarget"></b>
<b id="tab2" class="hiddenTarget"></b>
<b id="tab3" class="hiddenTarget"></b>
<b id="tab4" class="hiddenTarget"></b>
<b id="tab5" class="hiddenTarget"></b>
<div class="tabbedPages">
<ul class="tabs">
<li><a href="#tab1" class="default tab1 tabpages">Tab One</a></li>
<li><a href="#tab2" class="tab2 tabpages">Tab #2</a></li>
<li><a href="#tab3" class="tab3 tabpages">Tab No.3</a></li>
<li><a href="#tab4" class="tab4 tabpages">The Fourth Tab</a></li>
<li><a href="#tab5" class="tab5 tabpages">Any Content</a></li>
</ul>
<div id="view1" class="tabcontent default">
<h4>Tab 'persist'</h4>
<p>The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded.</p>
</div>
<div id="view2" class="tabcontent">
<h4>Multiple Tabs</h4>
<p>You can have multiple tabs on the same page, with only one copy of the CSS (javascript is not required).</p>
</div>
<div id="view3" class="tabcontent">
<h4>Tab Action from elsewhere on the same page.</h4>
<p>You can also open a tab using links elsewhere on the same page.</p>
<p>If you click this <a href="#tab1" class="tabpages">LINK</a> you will open 'Tab One' content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.</p>
</div>
<div id="view4" class="tabcontent">
<h4>Opened by a link from another page</h4>
<p>Link from another page can select a tab on the target page when loaded.</p>
</div>
<div id="view5" class="tabcontent">
<h4>No restrictions on tab content</h4>
<img src="pollensa.jpg" alt=" Polenca - Mallorca" />
<p>Port de Pollença (Catalan pronunciation: [ˈpɔrd də poˈʎɛnsə]) (Puerto Pollensa in Castilian Spanish) is a small town in north-eastern Mallorca, Spain, situated on the Bay of Pollença. It is located about six kilometres east of the inland town of Pollença and two kilometres southeast of Cala Sant Vicenç.</p>
<p>From <a href="http://en.wikipedia.org/wiki/Port_de_Pollen%C3%A7a">Wikipedia</a>, the free encyclopedia.</p>
<br />
<p>Photograph © stu nicholls</p>
</div>
</div>
</body>
</html>
Bookmarks