(Resolvido) Menu em abas

lamatta · Janeiro 19, 2011

Olá amigos, mais uma vez...

fui estudando pela internet e misturando alguns codigos, e conseguir fazer o que vocês encontrarão a baixo... Um menu em abas que mostra um conteudo de acordo com a aba selecionada e ainda muda a aba se ela não for selecionada, porém, o conteudo de dentro da div é exibido um em baixo do outro... Acho que alguma class corrige isso mas não achei qual...

<html>
<head>
<style type="text/css">
<!--
.aba li {
    margin-right:3px;
    }
.aba li:hover {
    border:#F4F4F4 1px solid;
    border-bottom:none;
    cursor:pointer;
    }
.unsel {
    display:block;
    float:left;
    padding:2px;
    background:#FFF;
    border:#FFFFFF 1px solid;
    border-bottom:none;
}
.sel {
    display:block;
    float:left;
    padding:2px;
    background:#F4F4F4;
    border:#F4F4F4 1px solid;
    border-bottom:none;
    border-top:#E5E5E5 1px solid;
}
.divsel {
    visibility: visible;
}

.divunsel {
    visibility: hidden;
}
-->
</style>
&lt;script language="JavaScript">
        function sel(idaba){
            var aba=document.getElementById(idaba);
            var nAbas="5";
            for(var i="1";i<nAbas;i++){
                var id="aba"+i;
                document.getElementById(id).className="unsel";
            }
            aba.className="sel";
            
            for(var u="1";u<nAbas;u++){
                var idt="textaba"+u;
                document.getElementById(idt).className="divunsel";
            }
            var iddiv="text"+idaba;
            document.getElementById(iddiv).className="divsel";
        }
</script>
</head>


<body>
<table width="450" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="aba">
            <ul>
                <li id="aba1" class="sel" onClick="sel(this.id)">Aba 01</li>
                <li id="aba2" class="unsel" onClick="sel(this.id)">Aba 02</li>
                <li id="aba3" class="unsel" onClick="sel(this.id)">Aba 03</li>
                <li id="aba4" class="unsel" onClick="sel(this.id)">Aba 04</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td valign="top" bgcolor="#F4F4F4">
            <div id="textaba1" class="divsel">Conteúdo da aba1 aqui</div>
            <div id="textaba2" class="divunsel">Conteúdo da aba2 aqui</div>
            <div id="textaba3" class="divunsel">Conteúdo da aba3 aqui</div>
            <div id="textaba4" class="divunsel">Conteúdo da aba4 aqui</div>
        </td>
    </tr>
</table>
</body>
</html>

Editado Janeiro 21, 2011 por _Vinny_
Adicioner tag [code]

lucas1407 · Janeiro 20, 2011

a soluçaõ é usar isso:

<html>
<head>
<style type="text/css">
<!--
.aba li {
margin-right:3px;
}
.aba li:hover {
border:#F4F4F4 1px solid;
border-bottom:none;
cursor:pointer;
}
.unsel {
display:block;
float:left;
padding:2px;
background:#FFF;
border:#FFFFFF 1px solid;
border-bottom:none;
}
.sel {
display:block;
float:left;
padding:2px;
background:#F4F4F4;
border:#F4F4F4 1px solid;
border-bottom:none;
border-top:#E5E5E5 1px solid;
}
.divsel {
display: visible;
}

.divunsel {
display: none;
}
-->
</style>
&lt;script language="JavaScript">
function sel(idaba){
var aba=document.getElementById(idaba);
var nAbas="5";
for(var i="1";i<nAbas;i++){
var id="aba"+i;
document.getElementById(id).className="unsel";
}
aba.className="sel";

for(var u="1";u<nAbas;u++){
var idt="textaba"+u;
document.getElementById(idt).className="divunsel";
}
var iddiv="text"+idaba;
document.getElementById(iddiv).className="divsel";
}
</script>
</head>


<body>
<table width="450" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="aba">
<ul>
<li id="aba1" class="sel" onClick="sel(this.id)">Aba 01</li>
<li id="aba2" class="unsel" onClick="sel(this.id)">Aba 02</li>
<li id="aba3" class="unsel" onClick="sel(this.id)">Aba 03</li>
<li id="aba4" class="unsel" onClick="sel(this.id)">Aba 04</li>
</ul>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#F4F4F4">
<div id="textaba1" class="divsel">Conteúdo da aba1 aqui</div>
<div id="textaba2" class="divunsel">Conteúdo da aba2 aqui</div>
<div id="textaba3" class="divunsel">Conteúdo da aba3 aqui</div>
<div id="textaba4" class="divunsel">Conteúdo da aba4 aqui</div>
</td>
</tr>
</table>
</body>
</html>

explicando:

No lugar de visibility: hidden coloque display: none, e no lugar de visibility: visible, coloque display: visible ou block.

Editado Janeiro 21, 2011 por _Vinny_
Adicioner tag [code]

lamatta · Janeiro 20, 2011

Show de bola... Funcionou de primeira, Valeu irmão!

lucas1407 · Janeiro 22, 2011

tranquilo, @ eu posso usar esse código? gostei muito dele @ como que você põe width 100% nele?

Entrar

(Resolvido) Menu em abas

Pergunta

lamatta

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

lucas1407

Link para o comentário

Compartilhar em outros sites

lamatta

Link para o comentário

Compartilhar em outros sites

lucas1407

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades