Criando Tabs no Javascript

Nesse artigo vou mostrar como criar Tabs no HTML. No projeto que estou alocado tinha que criar tabs no site, procurei algumas solu��es na internet, mas n�o achei uma boa solu��o, ent�o decidi criar minha solu��o.

Para construir o componente vamos utilizar as tags Table e Div. O c�digo em javascript serve para mudar o estilo e esconder e mostrar a tag Div que podemos colocar textos, imagens, etc.


<html>
<head>
    <title>Tab em Javascript</title>
    <style type="text/css">
        
    </style>
    <script language="javascript" type="text/javascript">
        
    </script>
</head>
<body >
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
    <tr style="height:27px">
        <td id="tab0" onclick="selectionTab('0');" style="width:15%;background:url(Imagens/
        gridtoolbar_back.gif);" class="primeiraTab" align="center">           
            <label id="detalhesAlarmeTabLabel0" class="labelFormularioValor">Tab 1</label> 
        </td>
        <td id="tab1" onclick="selectionTab('1');" style="width:15%;background:url(Imagens/
        gridtoolbar_back.gif);" class="meioTab" align="center">           
            <label id="detalhesAlarmeTabLabel1" class="labelFormularioValor">Tab 2</label> 
        </td>
        <td id="tab2" onclick="selectionTab('2');" style="width:15%;background:url(Imagens/
        gridtoolbar_back.gif);" class="meioTab" align="center">           
            <label id="detalhesAlarmeTabLabel2" class="labelFormularioValor">Tab 3</label> 
        </td>
        <td id="tab3" onclick="selectionTab('3');" style="width:15%;background:url(Imagens/
        gridtoolbar_back.gif);" class="meioTab" align="center">           
            <label id="detalhesAlarmeTabLabel3" class="labelFormularioValor">Tab 4</label> 
        </td>
        <td id="tab4" onclick="selectionTab('4');" style="width:15%;background:url(Imagens/
        gridtoolbar_back.gif);" class="ultimaTab" align="center">           
            <label id="detalhesAlarmeTabLabel4" class="labelFormularioValor">Tab 5</label> 
        </td>
        <td class="semTab" style="width:25%">
             
        </td>
        </tr>             
        <tr style="height:27px">
        <td align="center" colspan="6">   
            <div id="contentTab0" class="divTab" style="overflow-y:auto;width:100%;display:none;">
                <table border="0" style="width:99%;" align="center">
                    <tr style="height:2px"><td></td></tr>
                    <tr>
                        <td align="left" class="contentTab">
                            Conte�do Tab 1<br />
                            Tab em Javascript                             
                        </td>
                    </tr>
                </table>                                            
            </div>      
            <div id="contentTab1" class="divTab" style="overflow-y:auto;width:100%;display:none;">
                <table border="0" style="width:99%;" align="center">
                    <tr style="height:2px"><td></td></tr>
                    <tr>
                        <td align="left" class="contentTab">
                            Conte�do Tab 2<br />
                            Tab em Javascript                             
                        </td>
                    </tr>
                </table>                                           
            </div>  
            <div id="contentTab2" class="divTab" style="overflow-y:auto;width:100%;display:none;">
                <table border="0" style="width:99%;" align="center">
                    <tr style="height:2px"><td></td></tr>
                    <tr>
                        <td align="left" class="contentTab">
                            Conte�do Tab 3<br />
                            Tab em Javascript                             
                        </td>
                    </tr>
                </table>                                             
            </div>  
            <div id="contentTab3" class="divTab" style="overflow-y:auto;width:100%;display:none;">
                <table border="0" style="width:99%;" align="center">
                    <tr style="height:2px"><td></td></tr>
                    <tr>
                        <td align="left" class="contentTab">
                            Conte�do Tab 4<br />
                            Tab em Javascript                             
                        </td>
                    </tr>
                </table>                                              
            </div>  
            <div id="contentTab4" class="divTab" style="overflow-y:auto;width:100%;display:none;">
                <table border="0" style="width:99%;" align="center">
                    <tr style="height:2px"><td></td></tr>
                    <tr>
                        <td align="left" class="contentTab">
                            Conte�do Tab 5<br />
                            Tab em Javascript                             
                        </td>
                    </tr>
                </table>                                             
            </div>                                                      
        </td>
    </tr>   
</table>
</body>
</html>

HTML da p�gina

O evento onclick chama a fun��o que seleciona a tab.

Abaixo est� o estilo que utilizamos para desenhar o componente tab e formatando a p�gina.


<style type="text/css">
    .labelFormularioValor
    {
	    font-family:Segoe UI, Tahoma, Sans-Serif;
	    font-size:10pt;
	    color:#000000;	
    }       
        
    .contentTab
    {
	    font-family:Segoe UI, Tahoma, Sans-Serif;
	    font-size:10pt;
	    color:#000000;	
	    font-weight:bold;
    }              
        
    .divTab
        {
	    border-right: #A0C0E7 1px solid; 
	    border-left: #A0C0E7 1px solid;  
	    border-bottom: #A0C0E7 1px solid;
	    background: -webkit-gradient(linear, left top, left bottom, from(#DFEEFF), 
        to(#B4D4FF)); /* For Webkit Browsers */
	    background: -moz-linear-gradient(top, #DFEEFF, #B4D4FF); /* for Firefox */
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFEEFF',
        endColorstr='#B4D4FF'); /* for IE */
    }

    .primeiraTab
    {
	    border-left: #A0C0E7 1px solid;  
	    border-bottom: #A0C0E7 1px solid;
	    border-top: #A0C0E7 1px solid;  
	    background-color:#DFEEFF;
	    cursor:default;
    }

    .meioTab
    {
	    border-left: #A0C0E7 1px solid; 
	    border-bottom: #A0C0E7 1px solid;
	    border-top: #A0C0E7 1px solid;  
	    background-color:#DFEEFF;
	    cursor:default;
    }

    .ultimaTab
    {
	    border-left: #A0C0E7 1px solid; 
	    border-bottom: #A0C0E7 1px solid;
	    border-top: #A0C0E7 1px solid;  
	    background-color:#DFEEFF;
	    cursor:default;
    }

    .semTab
    {
	    border-left: #A0C0E7 1px solid;
	    border-bottom: #A0C0E7 1px solid; 
    }           
</style>

CSS da p�gina

Abaixo est� o c�digo em javascript que utilizamos para colocar a altura nas tags Divs e sele��o da tab.


<script language="javascript" type="text/javascript">
    function setSize() {
        var myWidth = 0, myHeight = 0;
            
        var objContentTab0 = document.getElementById('contentTab0');
        var objContentTab1 = document.getElementById('contentTab1');
        var objContentTab2 = document.getElementById('contentTab2');
        var objContentTab3 = document.getElementById('contentTab3');
        var objContentTab4 = document.getElementById('contentTab4');

        if (typeof (window.innerWidth) == 'number') {
            //Non-IE
            myWidth = document.documentElement.clientWidth;
            myHeight = window.innerHeight;
        }
        else if (document.documentElement && (document.documentElement.clientWidth || 
        document.documentElement.clientHeight)) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
        }
        else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            //IE 4 compatible
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
        }
            
        objContentTab0.style.height = (myHeight - 57) + 'px';
        objContentTab1.style.height = (myHeight - 57) + 'px';
        objContentTab2.style.height = (myHeight - 57) + 'px';
        objContentTab3.style.height = (myHeight - 57) + 'px';
        objContentTab4.style.height = (myHeight - 57) + 'px';
    }

    function selectionTab(value) {

        var objTab0 = document.getElementById('tab0');
        var objTab1 = document.getElementById('tab1');
        var objTab2 = document.getElementById('tab2');
        var objTab3 = document.getElementById('tab3');
        var objTab4 = document.getElementById('tab4');

        var objContentTab0 = document.getElementById('contentTab0');
        var objContentTab1 = document.getElementById('contentTab1');
        var objContentTab2 = document.getElementById('contentTab2');
        var objContentTab3 = document.getElementById('contentTab3');
        var objContentTab4 = document.getElementById('contentTab4');

        objTab0.style.background = 'url(./Imagens/gridtoolbar_back.gif)';
        objTab1.style.background = 'url(./Imagens/gridtoolbar_back.gif)';
        objTab2.style.background = 'url(./Imagens/gridtoolbar_back.gif)';
        objTab3.style.background = 'url(./Imagens/gridtoolbar_back.gif)';
        objTab4.style.background = 'url(./Imagens/gridtoolbar_back.gif)';

        objTab0.style.borderBottom = '#A0C0E7 1px solid';
        objTab1.style.borderBottom = '#A0C0E7 1px solid';
        objTab2.style.borderBottom = '#A0C0E7 1px solid';
        objTab3.style.borderBottom = '#A0C0E7 1px solid';
        objTab4.style.borderBottom = '#A0C0E7 1px solid';

        objContentTab0.style.display = 'none';
        objContentTab1.style.display = 'none';
        objContentTab2.style.display = 'none';
        objContentTab3.style.display = 'none';
        objContentTab4.style.display = 'none';

        if (value == "0") {
            objTab0.style.background = '#DFEEFF';
            objTab0.style.borderBottom = '0px';
            objContentTab0.style.display = 'block';
        }
        else if (value == "1") {
            objTab1.style.background = '#DFEEFF';
            objTab1.style.borderBottom = '0px';
            objContentTab1.style.display = 'block';
        }
        else if (value == "2") {
            objTab2.style.background = '#DFEEFF';
            objTab2.style.borderBottom = '0px';
            objContentTab2.style.display = 'block';
        }
        else if (value == "3") {
            objTab3.style.background = '#DFEEFF';
            objTab3.style.borderBottom = '0px';
            objContentTab3.style.display = 'block';
        }
        else if (value == "4") {
            objTab4.style.background = '#DFEEFF';
            objTab4.style.borderBottom = '0px';
            objContentTab4.style.display = 'block';
        }
    }

    //A fun��o � executada quando a p�gina � carregada.
    //Colocando a altura das tags divs.
    //Selecionando a tab.
    function pageLoad() {
        setSize();
        selectionTab('0');
    }

    window.onload = pageLoad;
    window.onresize = setSize;
</script>

JS da p�gina

Como pode ser visto o componente � bem f�cil de ser criado, para adicionar mas tabs, simplesmente � s� colocar mais td e alterar a fun��o selectionTab.

Abaixo o componente no browser.

Tecnologias:

Confira outros conte�dos:

CSS Border

HTML Icons: utilizando �cones em...

HTML hr: como utilizar a tag hr para...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Edson Em 2012

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso