Ir para conteúdo

POWERED BY:

Arquivado

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

beletato

Mudar valor da classe link por link

Por , em Javascript

Recommended Posts

beletato    0

beletato
Postado

Sou novo por aqui e novo no ambiente de programação, tenho a seguinte dúvida:

É possível mudar o valor da classe link por link?

Exemplo:

 

Tenho 4 links

<a href="" class="exibir">Link 1</a>
<a href="" class="ocultar">Link 2</a>
<a href="" class="ocultar">Link 3</a>
<a href="" class="ocultar">Link 4</a>

 

Pelo CSS defino que a classe "ocultar" fique oculta, ou seja, apena o primeiro link aparece.

O que quero fazer é, ao clicar no link 1, o link 2 apareça, ao clicar no link 2, o link 3 apareça...

 

Pesquisei, mexi, mudei, e não consegui fazer isso, no máximo, consegui mudar todas as classes de uma vez.

 

Obrigado desde já,

Breno

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

posta aí o seu código para ver como vc tá fazendo.

 

se vc estiver usando jquery usa a função next() e prev() para pegar as tags do "lado" a lógica é por ai...

Compartilhar este post

Link para o post
Compartilhar em outros sites

beletato    0

beletato
Postado

Então, já cheguei nesse ponto do next() e prev(), mas não consegui fazer funcionar...

$(document).ready(function(){
	$(".exibir").click(function(event){
		event.preventDefault();
		$(".ocultar").attr("class","exibir");
		$(".ocultar").show();
	});			
});

 

Só que ai ele exibe todos...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado
no seu script ele ia fechar todas as classe ocultar que ele achar por isso o next vai e pega só o posterior. o live vai deixar o evento funcionando nas novas classes exibir que serão criadas.


$(".exibir").live("click", function(){


$(this).attr("class","ocultar").next().attr("class","exibir").show();



});

Compartilhar este post

Link para o post
Compartilhar em outros sites

beletato    0

beletato
Postado

Não consegui fazer funcionar :cry:

 

O código da página é este:

<html>
	<head>
		<title>Mudar classe link a link</title>
		<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script>
			$(document).ready(function(){   
			
				$(".exibir").click(function(event){
				  event.preventDefault();
				  $(".ocultar").attr("class","exibir").show();
				});
				
			});
		</script>
		
		<style type="text/css">
			.exibir {
				display: block;
			}
			.ocultar {
				display: none;
			}
		</style>
	</head>
	<body>
		
			<a href="" class="exibir">Link 1</a>
			<a href="" class="ocultar">Link 2</a>
			<a href="" class="ocultar">Link 3</a>
			<a href="" class="ocultar">Link 4</a>
		
	</body>
</html>

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Assim:

<html>
<head>

	<title>Mudar classe link a link</title>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	var $as = $("a"),
		max = $as.length;

	$as.on('click', function(event){
		event.preventDefault();
		var $this = $(this),
			i = $this.index() < max-1 ? $this.index()+1 : 0;

		$this.removeClass('exibir').addClass('ocultar');

		$as.eq( i ).removeClass('ocultar').addClass('exibir');
	});
});
</script>

<style type="text/css">
.exibir {
	display: block;
}
.ocultar {
	display: none;
}
</style>
</head>
<body>

	<a href="" class="exibir">Link 1</a>
	<a href="" class="ocultar">Link 2</a>
	<a href="" class="ocultar">Link 3</a>
	<a href="" class="ocultar">Link 4</a>

</body>
</html>
o if ternario que fiz ali, é para fazer o circulo: ao chegar no ultimo link, volta para o primeiro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

beletato    0

beletato
Postado

William Bruno, realmente, este que você fez funciona perfeitamente, mas, e se caso, ao chegar no ultimo link, eu quiser mostrar uma mensagem?

 

Muito obrigado pela ajuda :clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

basta fazer um if cara :lol:

tenta ai.

$(document).ready(function(){
	var $as = $("a"),
		max = $as.length;

	$as.on('click', function(event){
		event.preventDefault();
		var $this = $(this),
			i = $this.index() + 1;

		if($this.index() < max-1){
			$this.removeClass('exibir').addClass('ocultar');
			$as.eq( i ).removeClass('ocultar').addClass('exibir');
		} else {
			alert('chegou no fim')
		}
	});
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

beletato    0

beletato
Postado

William Bruno e Bergs, muito obrigado pela ajuda de ambos!

Estou engatinhando em Jquery ainda, mas sei que é possível fazer muita coisa com ele.

 

Vou deixar o código completo do que fiz para, quem sabe, ajudar alguém...

<html>
	<head>
		<title>Mudar classe link a link</title>
		<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script>
		$(document).ready(function(){
	var $as = $("a"),
		max = $as.length;

	$as.on('click', function(event){
		event.preventDefault();
		var $this = $(this),
			i = $this.index() + 1;

		if($this.index() < max-1){
			$this.removeClass('exibir').addClass('ocultar');
			$as.eq( i ).removeClass('ocultar').addClass('exibir');
		} else {
                        $this.removeClass('exibir').addClass('ocultar');
			$('.votos').html("Votos feitos!");
		}
	});
});
		</script>

		<style type="text/css">
		.exibir {
			display: block;
		}
		.ocultar {
			display: none;
		}
		</style>
	</head>
	<body>

		<a href="" class="exibir">Link 1</a>
		<a href="" class="ocultar">Link 2</a>
		<a href="" class="ocultar">Link 3</a>
		<a href="" class="ocultar">Link 4</a>
		
		<div class="votos">Continue Votando!</div>

	</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