Menu em Abas

<style type="text/css">
<!--



}

.navegador {
width:130px;
border:1px dashed;
background-color:#F9F9F9;
padding: 4px 4px;
}

h1 {
margin: 2px;
}

#geral {
width: 970px;
text-align: left;
}

#menu ul {
list-style: none;
height: 1%;
display: table;
margin: 0;
padding: 0;
}

#menu ul li {
float: left;
margin: 0 4px;
margin-left: 0;
border: 1px solid;
border-bottom:1px solid;
display: block;
float: left;
padding: 5px 12px;
color: #000000;
font-weight: bold;
cursor: pointer;
}

#menu ul li.sel {
background-color:orange;
color: #000000;
cursor: pointer;
}

#menu ul li.nrl {
background-color:#dddddd;
color: #000000;
cursor: pointer;
}

.pagi {
background-color: #F9F9F9;
padding: 10px;
border: 1px solid;
display:none;
}

#conteudo {
background-color: #F9F9f9;
padding: 10px;
border: 1px solid; border-color: #cccccc;
}

-->
</style>



<script languagen="javascript">

function abrir() {
document.getElementById('conteudo').innerHTML = document.getElementById(1).innerHTML
var main = document.getElementById("geral");
var iten = main.getElementsByTagName("li");
if (iten) {
for (var i=0;i<iten.length;i++) {
iten[i].onclick = function() {
muda();
this.className = "sel";
document.getElementById('conteudo').innerHTML = document.getElementById(this.value).innerHTML
}
}
}
}
function muda() {
var main = document.getElementById("geral");
var iten = main.getElementsByTagName("li");
if (iten) {
for (var i=0;i<iten.length;i++) {
if (iten[i].className  == "sel") {
iten[i].className = "nrl";
}
}
}
}
window.onload= abrir;


</script>





<div id="geral">
<div id="menu">
<ul>
<li class="sel" value="1">Home</li>
        <li class="nrl" value="2">Downloads</li>
<li class="nrl" value="3">Codigo Fonte</li>
<li class="nrl" value="4">Tutoriais</li>
</ul>
</div>



<div id="conteudo"></div>
</div>


<div id="1" class="pagi">

</div>



<div id="2" class="pagi">

</div>



<div id="3" class="pagi">

</div>


<div id="4" class="pagi">

</div>