Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

vonzuben

[Resolvido] Aba Jquery

Por , em Javascript

Recommended Posts

vonzuben    12

vonzuben
Postado

http://dl.zatecus.com/open/abas.html

 

estava vendo essa abas em jquery, pois mudei a seleção, onde que a segunda aba agora quando entrar no site fica selecionada, porém fica com o primeiro comentário.

 

quero segunda aba selecionada com o segundo comentário.

 

mudei essa linha e a seleção mudou, pois troquei de first por last, mas o comentário continua sendo o primeiro $(conteudos + ' li:first-child').show();

Compartilhar este post

Link para o post
Compartilhar em outros sites

Valdeir Info    2

Valdeir Info
Postado

utilize :eq() ao invés de :first-child ou :last-child

 

procure por //Alteração para ver as alterações que fiz.

 

 

 

<!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" />
       <style type="text/css">

		body {margin: 20px; padding: 0; font-family: Verdana; font-size: 11px;}

		/* Estilo utilizado no exemplo */

		div#caixa {display: inline-block; width: 800px; height: 600px;}
			div#caixa p#abas {display: inline-block; width: 790px; height: 40px; margin: 0 10px 0 10px; padding: 0; overflow: hidden; vertical-align: bottom;}
				div#caixa p#abas a {display: inline-block; font-size: 14px; font-weight: bold; color: #666; text-decoration: none; padding: 12px 26px 12px 26px; margin: 0 5px 0 0; background-color: #f0f0f0;}
					div#caixa p#abas a:hover {background-color: #999; color: white;}
					div#caixa p#abas a.selected {background-color: #ffcc00; color: #000;}
			div#caixa ul#conteudos {display: inline-block; width: 798px; height: 558px; margin: 0; padding: 0; border: 1px solid #ccc;}
				div#caixa ul#conteudos li {display: inline-block; width: 758px; height: 528px; margin: 10px 20px 10px 20px; padding: 0; overflow: auto;}

	</style>
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
       <script type="text/javascript">

       	/* Função que carrega script das abas */

       	$.abasSimples = function ()
       	{

       		/* Guarda IDs dos elementos */

       		var abas = 'p#abas';
       		var conteudos = 'ul#conteudos';

       		/* Oculta todas as abas */

       		$(conteudos + ' li').hide();

       		/* Exibe a primeira aba */

       		$(conteudos + ' li:eq(1)').show(); //Alteração
			$(abas + ' a:eq(1)').addClass('selected'); //Alteração

       		/* Quando uma aba for clicada */

       		$(abas + ' a').click(function()
       		{

       			/* Remove todas as classes de todas as abas */

       			$(abas + ' a').removeClass('selected');

       			/* Acrescenta uma classe CSS marcando visualmente a aba como selecionada */

       			$(this).addClass('selected');

       			/* Oculta todas as abas abertas */

       			$(conteudos + ' li').hide();

       			/* Exibe a aba que foi clicada */

       			$(conteudos +  ' ' + $(this).attr('href')).show();

       			/* Fim :D */

       			return false;

       		}); 

       	};

       	/* Quando o documento estiver carregado… */

		$(document).ready(function()
		{

			/* Carrega a função das abas */

			$.abasSimples();

		});

	</script>
   </head>
   <body>

   	<h1>Criando abas (tabs) com jQuery</h1>

   	<!-- Início: Caixa -->

   	<div id="caixa">


   	<!-- Início: Seleção de abas -->

		<p id="abas">
			<a href="#aba1">Aba 1</a> <!-- Alteração -->
			<a href="#aba2">Aba 2</a>
			<a href="#aba3">Aba 3</a>
			<a href="#aba4">Aba 4</a>
		</p>

		<!-- Fim: Seleção de abas -->

		<!-- Início: Conteúdo das abas -->

		<ul id="conteudos">

			<!-- Início: Conteúdo da Aba 1 -->

			<li id="aba1">

				<h2>Demonstração de texto1</h2>					
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae est et neque pretium convallis a eu ipsum. Integer at metus est, et placerat enim. Aenean varius mi ut mi bibendum molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla tempus convallis massa eget mattis. Cras ligula metus, ullamcorper pharetra facilisis id, viverra non nibh. Sed ligula nulla, lobortis nec pellentesque eget, egestas vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<p>Vestibulum gravida, arcu quis tempor sodales, felis eros ornare nibh, in suscipit turpis velit adipiscing dui. Etiam vulputate lectus non elit faucibus sed laoreet turpis imperdiet. Nulla vehicula elementum auctor. In at ante neque. Donec non turpis mauris, quis varius ipsum. Donec elementum odio ac lectus convallis tincidunt. Nunc ac iaculis quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer fringilla scelerisque libero vitae egestas. Nam nec metus sem, ac fermentum ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				<p>Praesent leo sem, faucibus at suscipit eu, ultrices id lorem. Pellentesque nec velit at elit fermentum bibendum. Vestibulum malesuada blandit tristique. Suspendisse orci metus, elementum nec faucibus id, posuere eget nisl. Maecenas vestibulum volutpat nisi eget pulvinar. Nam at purus vel ante congue dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ut quam neque. Integer non turpis non urna facilisis venenatis vitae sed est. Sed at iaculis odio. Maecenas leo velit, blandit eu iaculis sit amet, mattis eu metus.</p>

			</li>

			<!-- Fim: Conteúdo da Aba 1 -->

			<!-- Início: Conteúdo da Aba 2 -->

			<li id="aba2">

				<h2>Conteúdo da aba #2</h2>
				<img src="http://wowppr.com/719-thumb.jpg" width="750" height="480" border="0" />

			</li>

			<!-- Fim: Conteúdo da Aba 2 -->

			<!-- Início: Conteúdo da Aba 3 -->

			<li id="aba3">

				<h2>Trololooooooo</h2>
				<iframe width="756" height="480" src="http://www.youtube.com/embed/v1PBptSDIh8" frameborder="0" allowfullscreen></iframe>

			</li>

			<!-- Fim: Conteúdo da Aba 3 -->

			<!-- Início: Conteúdo da Aba 4 -->

			<li id="aba4">

				<h2>Valdeir</h2>
				<iframe width="756" height="480" src="http://www.youtube.com/embed/v1PBptSDIh8" frameborder="0" allowfullscreen></iframe>

			</li>

			<!-- Fim: Conteúdo da Aba 4 -->

		</ul>

		<!-- Fim: Conteúdo das abas -->

	</div>

	<!-- Fim: Caixa -->

       <p>Mais dicas? Acesse <a href="http://www.zatecus.com">zatecus.com</a> ;)<br /><span style="font-size: 11px; color: #ccc;">7 de Fevereiro de 2012</span></p>

   </body>

</html>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito