potresti partire da qui...:
codice:
<!doctype html>
<html>
<head>
<title>Tabs</title>
<style type="text/css">
body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222}
div.tabpanel {width:400px;margin-bottom:2em}
div.tabpanel div.tab{border: 1px solid #D7D7D7;border-top:0}
div.tabpanel div.tab{padding: 10px}
div.tab h2{width:100%;margin: 0;padding:0.3em 0;font-size:150%;color:#86A5D8}
div.tab p{margin-top:0}
/* Inizio tab */
ul.tabnav{width: 100%;overflow:hidden;list-style: none;
margin: 0;padding:0;background:url(line.png) repeat-x bottom}
ul.tabnav li{float: left;margin: 0 0 0 0.5em;padding: 0}
ul.tabnav a{float: left;padding: 0 0 0 0.8em;
background: url(tab.png) no-repeat top left;
text-decoration: none;color: #222;
border-bottom: 1px solid #D7D7D7}
ul.tabnav span{float: left;padding: 0.6em 0.8em 0.6em 0;
background: url(tab.png) no-repeat top right;cursor: pointer}
ul.tabnav a.active,ul.tabnav a:hover{
background: url(tab2.png) no-repeat top left;
border-bottom:1px solid #FFF}
ul.tabnav a.active span,ul.tabnav a:hover span{
background: url(tab2.png) no-repeat top right;color: #184D8A}
</style>
<script type="text/javascript">
function makeTabs(oCont,oNav,nDefault) {
var nActive = nDefault || 1, aTabs = [], aLnks = oNav.getElementsByTagName("a"), aChilds = oCont.childNodes;
function show(number) {
for (var i = 0; i < aTabs.length; i++) {
aTabs[i].style.display = i + 1 === number ? "block" : "none";
aLnks[i].className = i + 1 === number ? "active" : "";
}
}
for (var i = 0; i < aChilds.length; i++) {
if (aChilds[i].className === "tab") { aTabs.push(aChilds[i]); }
}
show(nActive);
function change() {
show(parseFloat(this.id.substr(this.id.search(/\d/))));
return(false);
}
for (var i = 0; i < aLnks.length; i++) {
aLnks[i].id = "tabLnk" + String(i + 1);
aLnks[i].onclick = change;
}
}
</script>
</head>
<body onload="makeTabs(document.getElementById('tabcont1'),document.getElementById('tabcont1-nav'));">
<ul id="tabcont1-nav" class="tabnav">[*]<span>News</span>[*]<span>Articoli</span>[*]<span>Video</span>[*]<span>Download</span>[/list]
<div id="tabcont1" class="tabpanel">
<div id="tab1" class="tab">
<h2>Sezione News</h2>
e uio euou ioo ei uoeoi u ouoe oeoo iii e u u eeiu ue uu eoei uaa au eou o oouoe oio iie e a o uo u a aa uuee iee i.</p>
Eeue eoeoo iooee oieu ooei o iae u eo ueii oi ieio eu eoie ee io oee ieiu uo iooo ai eeo ui ueuuo iei ua uuie ee.</p>
</div>
<div id="tab2" class="tab">
<h2>Sezione Articoli</h2>
Uo a aeuu oio oou o ieu o oioe iuue ue ie uooo oo iueeo ooou uei uiai ee ouiu ae u u iaia ieio ioiiu ieii ieo ueii iei ou uo oui eeea uei uuee eioo.</p>
Euoao uu ieu oa oue oi ou ee ooio iee iueee auuo i euii oiu ooou aoi e oe e eio ue oa e oaoo o aeu aoi.</p>
</div>
<div id="tab3" class="tab">
<h2>Sezione Video</h2>
Oeuui eia o a ee aa i ueiu aua iuia iou eiae ea ouie o uiee eoi uoi i oioa ui euiu.</p>
Uu oo iii ueie aioo iuu oi ioiu ou ueea ai e eu ui i ao ei iaue eoo au o o o e oi euu aoo ie o oaoo uuo eia ou ee e oo uoa iiea.</p>
</div>
<div id="tab4" class="tab">
<h2>Sezione Download</h2>
e uio euou ioo ei uoeoi u ouoe oeoo iii e u u eeiu ue uu eoei uaa au eou o oouoe oio iie e a o uo u a aa uuee iee i.</p>
Eeue eoeoo iooee oieu ooei o iae u eo ueii oi ieio eu eoie ee io oee ieiu uo iooo ai eeo ui ueuuo iei ua uuie ee.</p>
</div>
</div>
</body>
</html>
Rispondi quotando
