{"id":114,"date":"2015-02-08T00:45:13","date_gmt":"2015-02-08T00:45:13","guid":{"rendered":"http:\/\/drcode.com.br\/blog\/?p=114"},"modified":"2015-02-08T00:47:59","modified_gmt":"2015-02-08T00:47:59","slug":"abas-com-jquery","status":"publish","type":"post","link":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/","title":{"rendered":"Abas com Jquery"},"content":{"rendered":"<h2>Aprenda a fazer Abas com Jquery para seu site.<\/h2>\n<p>Bom, uma coisa muito utilizada para o desenvolvimento de sites, s\u00e3o abas, mas como assim abas ? Veja <a title=\"Abas com Jquery\" href=\"http:\/\/drcode.com.br\/blog\/exemplos\/abas\/\">aqui o Exemplo<\/a>.<\/p>\n<p>Uma forma simples de fazer as abas s\u00e3o com jquery e voc\u00ea poder\u00e1 aprender isso aqui. Bom, vamos l\u00e1, o que precisamos para fazer isso ?<\/p>\n<p>Primeiro temos que linkar a galeria jquery, desta forma, colocando antes do fechamento body por quest\u00f5es de carregamento.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">&lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Logo depois criaremos um arquivo com externo com extens\u00e3o .js chamado <em>abas.js<\/em> e nele colocamos o seguinte c\u00f3digo:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">$(document).ready(function(){\r\n\t$(\"#content .conteudo:nth-child(1)\").show();\r\n\t$(\".aba\").click(function(){\r\n\t\t$(\".aba\").removeClass(\"ativa\");\r\n\t\t$(this).addClass(\"ativa\");\r\n\t\tvar indice = $(this).parent().index();\r\n\t\tindice++;\r\n\t\t$(\"#content .conteudo\").hide();\r\n\t\t$(\"#content .conteudo:nth-child(\"+indice+\")\").show();\r\n                return false;\r\n\t});\r\n});<\/code><\/pre>\n<p>Ok, vamos entender o c\u00f3digo, na primeira linha damos inicio ao documento<\/p>\n<p>Na segunda linha, dizemos que a primeira div estara com o display: block, com o .show(), o :nth-child(1) dizemos a primeira, se fosse a segunda dentro dos parenteses colocar\u00edamos 2, 3, 4&#8230;<\/p>\n<p>Na terceira damos a\u00e7\u00e3o ao clique sobra a classe .aba, assim dizemos para remover todas as classes .ativa e adicionar a mesma na aba clicada, logo abaixo pegamos o \u00edndice da aba e dizemos que as classes\u00a0.conteudo ter\u00e3o que sumir com .hide() e a do mesmo \u00edndice aparecera com o .show().<\/p>\n<p>Em seguida teremos o HTML que utilizaremos para isso, veja s\u00f3:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">&lt;div id=\"abas\"&gt;\r\n\t&lt;nav id=\"menu\"&gt;\r\n\t\t&lt;ul&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;a href=\"#\" class=\"aba\"&gt;\r\n\t\t\t\t\tAba 1\r\n\t\t\t\t&lt;\/a&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;a href=\"#\" class=\"aba\"&gt;\r\n\t\t\t\t\tAba 2\r\n\t\t\t\t&lt;\/a&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;a href=\"#\" class=\"aba\"&gt;\r\n\t\t\t\t\tAba 3\r\n\t\t\t\t&lt;\/a&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;a href=\"#\" class=\"aba\"&gt;\r\n\t\t\t\t\tAba 4\r\n\t\t\t\t&lt;\/a&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t&lt;\/ul&gt;\r\n\t&lt;\/nav&gt;\r\n\t&lt;div id=\"content\"&gt;\r\n\t\t&lt;div class=\"conteudo\"&gt;\r\n\t\t\tConte\u00fado da aba 1 \r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;div class=\"conteudo\"&gt; \r\n\t\t\tConte\u00fado da aba 2 \r\n\t\t&lt;\/div&gt; \r\n\t\t&lt;div class=\"conteudo\"&gt; \r\n\t\t\tConte\u00fado da aba 3 \r\n\t\t&lt;\/div&gt; \r\n\t\t&lt;div class=\"conteudo\"&gt; \r\n\t\t\tConte\u00fado da aba 4 \r\n\t\t&lt;\/div&gt; \r\n\t&lt;\/div&gt; \r\n&lt;\/div&gt;<\/code><\/pre>\n<p>E em por fim\u00a0o CSS, colocando em um arquivo externo com extens\u00e3o .css, ou em seu pr\u00f3prio css<\/p>\n<pre class=\"line-numbers\"><code class=\"language-css\">*{\r\n    margin: 0;\r\n    padding: 0;\r\n    list-style: none ;\r\n    font-family: 'Arial','Sans-Serif';\r\n}\r\n\r\n#abas {\r\n\tmargin: 10px auto 0;\r\n\twidth: 500px;\r\n}\r\n\r\nnav#menu {\r\n\tfloat: left;\r\n\twidth: 100%;\r\n}\r\n\r\nnav#menu ul li {\r\n\tfloat: left;\r\n\tmargin: 0 5px 0 0;\r\n}\r\n\r\nnav#menu ul li a {\r\n\tpadding: 5px 15px;\r\n\ttext-decoration: none;\r\n\tcolor: #000; \/* Cor do Texto da aba *\/\r\n\tbackground-color: #CCC; \/* Cor do Fundo da aba *\/\r\n\ttext-decoration: none;\r\n\tfloat: left;\r\n}\r\n\r\nnav#menu ul li a:hover,\r\nnav#menu ul li .ativa{\r\n\tbackground-color: #747474;  \/* Cor do hover\/aba ativa do Fundo da aba *\/\r\n\tcolor: #FFF;\/* Cor do hover\/aba ativa do Texto da aba *\/\r\n}\r\n\r\n.conteudo {\r\n\tdisplay: none;\r\n\tfloat: left;\r\n\tclear: both;\r\n\twidth: 96%;\r\n\tpadding: 10px 2%;\r\n\tborder: 1px solid #CCC;\r\n}<\/code><\/pre>\n<p>Veja o exemplo de como ficaram\u00a0as abas com jquery<a title=\"Abas com Jqery\" href=\"http:\/\/drcode.com.br\/blog\/exemplos\/abas\/#\"> clicando aqui<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda a fazer Abas com Jquery para seu site. Bom, uma coisa muito utilizada para o desenvolvimento de sites, s\u00e3o abas, mas como assim abas ? Veja aqui o Exemplo. Uma forma simples de fazer as abas s\u00e3o com jquery e voc\u00ea poder\u00e1 aprender isso aqui. Bom, vamos l\u00e1, o que precisamos para fazer isso [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[36,39,35,37,29,38],"class_list":["post-114","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-abas","tag-abas-javascrip","tag-abas-jquery","tag-como-fazer-abas","tag-jquery","tag-jquery-abas"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Abas com Jquery<\/title>\n<meta name=\"description\" content=\"A maioria dos sites que vemos por ai utilizam um mecanismo de abas com jquery, e isso \u00e9 muito interessante, veja s\u00f3 como fazer isso e muito mais.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Abas com Jquery\" \/>\n<meta property=\"og:description\" content=\"A maioria dos sites que vemos por ai utilizam um mecanismo de abas com jquery, e isso \u00e9 muito interessante, veja s\u00f3 como fazer isso e muito mais.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Dr Code\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/Dr-Code\/1408258822807332\" \/>\n<meta property=\"article:author\" content=\"http:\/\/www.facebook.com.br\/Felipeourjake\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-08T00:45:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-02-08T00:47:59+00:00\" \/>\n<meta name=\"author\" content=\"Felipe Mello\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Mello\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/\"},\"author\":{\"name\":\"Felipe Mello\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\"},\"headline\":\"Abas com Jquery\",\"datePublished\":\"2015-02-08T00:45:13+00:00\",\"dateModified\":\"2015-02-08T00:47:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/\"},\"wordCount\":241,\"commentCount\":0,\"keywords\":[\"abas\",\"abas javascrip\",\"abas jquery\",\"como fazer abas\",\"jquery\",\"jquery abas\"],\"articleSection\":[\"JS\/Jquery\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/\",\"url\":\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/\",\"name\":\"Abas com Jquery\",\"isPartOf\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/#website\"},\"datePublished\":\"2015-02-08T00:45:13+00:00\",\"dateModified\":\"2015-02-08T00:47:59+00:00\",\"author\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\"},\"description\":\"A maioria dos sites que vemos por ai utilizam um mecanismo de abas com jquery, e isso \u00e9 muito interessante, veja s\u00f3 como fazer isso e muito mais.\",\"breadcrumb\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/drcode.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS\/Jquery\",\"item\":\"https:\/\/drcode.com.br\/blog\/category\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Abas com Jquery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#website\",\"url\":\"https:\/\/drcode.com.br\/blog\/\",\"name\":\"Dr Code\",\"description\":\"Dicas para desenvoldores web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/drcode.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\",\"name\":\"Felipe Mello\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"caption\":\"Felipe Mello\"},\"description\":\"Felipe Mello, desenvolvedor desde 2014. Sendo programador Back-end, Front-end, e Designer. Conhecedor de PHP, CakePHP, Laravel, React, Angular, Node, jQuery\",\"sameAs\":[\"http:\/\/www.facebook.com.br\/Felipeourjake\",\"https:\/\/instagram.com\/felipeourjake\",\"https:\/\/www.linkedin.com\/in\/felipe-melo-62837aa7\/\",\"https:\/\/x.com\/felipeourjake\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Abas com Jquery","description":"A maioria dos sites que vemos por ai utilizam um mecanismo de abas com jquery, e isso \u00e9 muito interessante, veja s\u00f3 como fazer isso e muito mais.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/","og_locale":"pt_BR","og_type":"article","og_title":"Abas com Jquery","og_description":"A maioria dos sites que vemos por ai utilizam um mecanismo de abas com jquery, e isso \u00e9 muito interessante, veja s\u00f3 como fazer isso e muito mais.","og_url":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/","og_site_name":"Dr Code","article_publisher":"https:\/\/www.facebook.com\/pages\/Dr-Code\/1408258822807332","article_author":"http:\/\/www.facebook.com.br\/Felipeourjake","article_published_time":"2015-02-08T00:45:13+00:00","article_modified_time":"2015-02-08T00:47:59+00:00","author":"Felipe Mello","twitter_misc":{"Escrito por":"Felipe Mello","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/#article","isPartOf":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/"},"author":{"name":"Felipe Mello","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281"},"headline":"Abas com Jquery","datePublished":"2015-02-08T00:45:13+00:00","dateModified":"2015-02-08T00:47:59+00:00","mainEntityOfPage":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/"},"wordCount":241,"commentCount":0,"keywords":["abas","abas javascrip","abas jquery","como fazer abas","jquery","jquery abas"],"articleSection":["JS\/Jquery"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/","url":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/","name":"Abas com Jquery","isPartOf":{"@id":"https:\/\/drcode.com.br\/blog\/#website"},"datePublished":"2015-02-08T00:45:13+00:00","dateModified":"2015-02-08T00:47:59+00:00","author":{"@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281"},"description":"A maioria dos sites que vemos por ai utilizam um mecanismo de abas com jquery, e isso \u00e9 muito interessante, veja s\u00f3 como fazer isso e muito mais.","breadcrumb":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/drcode.com.br\/blog\/jquery\/abas-com-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/drcode.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"JS\/Jquery","item":"https:\/\/drcode.com.br\/blog\/category\/jquery\/"},{"@type":"ListItem","position":3,"name":"Abas com Jquery"}]},{"@type":"WebSite","@id":"https:\/\/drcode.com.br\/blog\/#website","url":"https:\/\/drcode.com.br\/blog\/","name":"Dr Code","description":"Dicas para desenvoldores web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/drcode.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281","name":"Felipe Mello","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","caption":"Felipe Mello"},"description":"Felipe Mello, desenvolvedor desde 2014. Sendo programador Back-end, Front-end, e Designer. Conhecedor de PHP, CakePHP, Laravel, React, Angular, Node, jQuery","sameAs":["http:\/\/www.facebook.com.br\/Felipeourjake","https:\/\/instagram.com\/felipeourjake","https:\/\/www.linkedin.com\/in\/felipe-melo-62837aa7\/","https:\/\/x.com\/felipeourjake"]}]}},"views":3537,"_links":{"self":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":3,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/114\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}