Criando abas de navegação com jQuery

Aprenda a criar abas de navegação usando jQuery. É fácil de criar. O tutorial foi dividido em três aulas para poder ter um maior nível de aprendizado. Confira que é muito bom!

Por Programação Pular para comentários
Criando abas de navegação com jQuery

http://www.oficinadanet.com.br//imagens/coluna/3171//jquery-abas.jpg

Nesta pequena série de aulas irei ensinar para vocês como criar um sistema de navegação em abas usando jQuery e CSS. Tudo muito simples e de fácil entendimento para que todos possam acompanhar o assunto.

Dividi as aulas em 3 partes para ficar mais prático e objetivo. Depois de assistir não deixe de praticar o que foi ensinado e deixar seu comentário contando o que achou das aulas.

O tutorial:



Download o jQuery

Código usado:
$(document).ready(function() {
    //Quando carregar a pagina
    $(".conteudo").hide(); //esta primeira linha servirá para esconder as divs do conteúdo
    $("ul.menu li:first").addClass("active").show(); //Ativar primeira aba
    $(".conteudo:first").show('slow'); //abre a pagina suavemente

    //On Click Event
    $("ul.menu li").click(function() {// quando clicar no link do menu irá executar a seguinte função:
        $("ul.menu li").removeClass("active"); //remove a class no link clicado para que não fica marcado
        $(this).addClass("active"); //adiciona a classe no link clicado para que o usuario saiba em qual link ele esta
        $(".conteudo").hide(); //esconder as divs do conteúdo
        var activeaba = $(this).find("a").attr("href"); //Encontrar o valor do atributo rel para identificar a aba que esta ativa + conteúdo
        $(activeaba).fadeIn('slow'); //efeito de fade in com o conteúdo ativo
        return false;// o returno falso evita que ao clicar no link a página role para o topo.
    });

});

Compartilhe com seus amigos:
Mais sobre: jquery-abas, jquery
Quer conversar com o(a) Roberto, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.