Como criar abas com CSS e JavaScript?

HTML “ guias ”São os blocos que armazenam o conteúdo de um site em pedaços. Eles são usados para exibir o conteúdo armazenado usando múltiplas abordagens, como clique do mouse, clique duplo, passar o mouse e muito mais. As guias fornecem a maneira mais simples de navegar pelas diferentes páginas de um site. Além disso, também ajudam a gerir o espaço e a tornar o site mais atrativo e chamativo.

Este guia explicará como criar guias com CSS e JavaScript.

Como criar abas com CSS e JavaScript?

Esta seção apresenta instruções passo a passo para a criação de abas com CSS e JavaScript.

Etapa 1: criar estrutura de guias usando HTML

Primeiro, observe o código HTML que cria a estrutura de guias HTML:

< ID da div = 'tab1' ao clicar = 'primeiro()' > Lar divisão >

< ID da div = 'tab2' ao clicar = 'segundo();' > Sobre divisão >

< ID da div = 'tab3' ao clicar = 'terceiro();' > Contate-nos divisão >

< br />

< ID da div = 'cont1' > Bem vindo ao Linuxhint ! divisão >

< ID da div = 'cont2' > EDUCAÇÃO TECNOLÓGICA

Construímos muitos produtos para ajudá-lo a aprender sobre Linux, programação, ciência da computação e muito mais.

divisão >

< ID da div = 'cont3' >

Você pode entrar em contato com nossa equipe no editor AT linuxhint DOT com.

divisão >

Nas linhas de código acima:

O '
”adiciona um elemento div com um id “tab1” e um “ ao clicar ”evento para executar o vinculado“ primeiro() ”função quando é clicado. Este elemento atua como uma guia HTML.
O método acima é executado para os próximos dois elementos div.
O '
”A tag adiciona uma quebra de linha.
O '
”tag novamente insere um elemento div com um id atribuído “cont1”. Este elemento mostra o conteúdo da aba criada em um bloco.
Os próximos dois “
”Tags também adicionam elementos div com seus IDs atribuídos.

Etapa 2: guias de estilo usando CSS

Agora, aplique as propriedades de estilo CSS para personalizar as guias e seus conteúdos de acordo com sua escolha:

< estilo >

#tab1, #tab2, #tab3 {

flutuador : esquerda ;

preenchimento : 5px 10px 5px 10px ;

fundo : laranjavermelho ;

cor : #FFFFFF ;

margem : 0px 5px 0px 5px ;

cursor : ponteiro ;

fronteira - raio : 3px ;

}

#tab1 : passe o mouse, #tab2 : passe o mouse, #tab3 : flutuar {

fundo : verde ;

}

#cont1, #cont2, #cont3 {

largura : 300 pixels ;

altura : 100 pixels ;

preenchimento : 40 pixels ;

Fonte - tamanho : médio ;

Fonte - família : 'Times New Roman' , Vezes, serifa ;

fronteira : 2px vermelho laranja sólido ;

fronteira - raio : 7px ;

mostrar : nenhum ;

}

estilo >

No trecho de código declarado:

Em primeiro lugar, acesse o “ guias ”Usando seus IDs atribuídos e personalizando-os por meio das seguintes propriedades de estilo (float, padding, background, color, margin: 0px 5px 0px 5px, cursor e border-radius).
Em seguida, anexe o “ flutuar ”Manipulador de eventos com as guias para alterar suas cores de fundo quando o mouse do usuário passa sobre elas.
Depois disso, acesse o “ conteúdo das guias ”armazenado nos elementos div cujos ids são “cont1”, “cont2” e “cont3”. Agora, aplique as seguintes propriedades de estilo (largura, altura, preenchimento, tamanho da fonte, família da fonte, borda, raio da borda e exibição) a eles.

Etapa 3: adicionar funcionalidades às guias usando JavaScript

Por último, adicione funcionalidades às abas criadas com a ajuda de JavaScript:

< roteiro >

funcionar primeiro ( ) {

documento. getElementById ( 'cont1' ) . estilo . mostrar = 'bloquear' ;

documento. getElementById ( 'cont2' ) . estilo . mostrar = 'nenhum' ;

documento. getElementById ( 'cont3' ) . estilo . mostrar = 'nenhum' ;

}

função segundo ( ) {

documento. getElementById ( 'cont2' ) . estilo . mostrar = 'bloquear' ;

documento. getElementById ( 'cont1' ) . estilo . mostrar = 'nenhum' ;

documento. getElementById ( 'cont3' ) . estilo . mostrar = 'nenhum' ;

}

função terceira ( ) {

documento. getElementById ( 'cont3' ) . estilo . mostrar = 'bloquear' ;

documento. getElementById ( 'cont1' ) . estilo . mostrar = 'nenhum' ;

documento. getElementById ( 'cont2' ) . estilo . mostrar = 'nenhum'

}

roteiro >

As linhas de código acima:

Defina uma função chamada “ primeiro ”.
Nesta definição de função, o “ document.getElementById() ”O método acessa o elemento div cujo id é “cont1” e aplica o “ estilo ”propriedade com um“ bloquear ” valor nisso. Esta propriedade exibirá o conteúdo da aba na qual o usuário clica.
Em seguida, “document.getElementById()” acessa outro div e aplica a propriedade “style” com um valor “none” para ocultá-lo. Isso ocultará esse elemento na página da web.
O método acima é executado para os próximos elementos div acessados. Isso ocorre porque a função “primeira” exibe apenas o conteúdo da aba cujo valor da propriedade “estilo” é “bloquear” e oculta as demais.
O procedimento acima é executado para as próximas funções “segundo()” e “terceiro()”.

Saída

Percebe-se que as abas foram criadas com sucesso e mostram seus respectivos conteúdos ao clique do usuário.

Conclusão

Para criar guias, primeiro construa suas estruturas usando “HTML” e depois personalize-as com a ajuda das propriedades de estilo CSS. As propriedades de estilo são adicionadas sem exportar nenhuma folha de estilo adicional. Essas propriedades tornam as guias atraentes e atraentes. Depois que as guias forem criadas e personalizadas, use a linguagem de programação JavaScript para adicionar funcionalidades a elas. Este guia explicou de forma prática o procedimento completo para criar abas com CSS e JavaScript.

Como criar abas com CSS e JavaScript?