Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Gostaria de colocar a seta segue link da imagem.
/applications/core/interface/imageproxy/imageproxy.php?img=http://imageshack.com/a/img22/8811/mi0r.jpg&key=2cd2dd53bf4c27473a9a1b6468051941f4a5b1343f145b8ba618d8edabbdd525" alt="mi0r.jpg" />
Link da imagem em PNG sem funfo para ser usada.
http://imageshack.com/a/img829/4639/pqil.png
Grato pela ajuda dos amigos.
Abaixo meu HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Abas Ultilizando Jquery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="abas.js"></script>
</head>
<body>
<div id="geral">
<ul class="menu">
<li><a href="#aba01">Mais vistos</a></li>
<li><a href="#aba02">Mais comentados</a></li>
</ul><!--FECHA UL MENU-->
<div id="box">
<div id="aba01" class="conteudo">Aqui vai os posts mais visto!</div>
<div id="aba02" class="conteudo">Aqui vai os posts mais comentados</div>
</div><!--Fecha Div BOX-->
</div><!--Fecha Div GERAL-->
</body>
</html>Abaixo CSS
*{ margin:0; padding:0;}
#geral{ width:300px; margin:0 auto;}
ul.menu{width:100%; margin:0; padding:0; float:left; list-style:none; height:32px; }
ul.menu li{ width:150px; float:left; margin:0; padding:0; height:31px; line-height:31px; background:#e0e0e0; overflow:hidden; position:relative;}
ul.menu li a{text-decoration:none; color:#000; border:1px solid #000; display:block; font-size:12px; text-align:center; outline:none;}
ul.menu li a:hover{ background:#66ccff;}
ul.menu li.active, ul.menu li.active a:hover{background:#c5df61; border-bottom:1px solid #FFF;}
#box{ text-align:left; border:1px solid #999; border-top:5px; clear:both; float:left; width:100%; background:#FFF;}
.conteudo{ padding:20px; font-size:12px;}
.conteudo h2{ font-weight:normal;}
Abaixo JS
// JavaScript Document
$(document).ready(function() {
//Quando carregar a pagina
$(".conteudo").hide(); //esta primeira linha servir para esconder as divs do contedo
$("ul.menu li:first").addClass("active").show(); //Ativar primeira aba
$(".conteudo:first").show(); //abre a primeira pagina(aba) efeito (slow)ou (fast)
//On Click Event
$("ul.menu li").click(function() {// quando clicar no link do menu ir executar a seguinte funo:
$("ul.menu li").removeClass("active"); //remove a class no link clicado para que no 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 contedo
var activeaba = $(this).find("a").attr("href"); //Encontrar o valor do atributo rel para identificar a aba que esta ativa + contedo
$(activeaba).fadeIn('slow'); //efeito de fade in com o contedo ativo
return false;// o returno falso evita que ao clicar no link a pgina role para o topo.
});
});Carregando comentários...