Ir para conteúdo

POWERED BY:

Arquivado

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

mateusguitar1

Âncora + Identificação

Por , em Javascript

Recommended Posts

mateusguitar1    0

mateusguitar1
Postado

Eae Galera do Forum!

 

Gostaria de saber se tem como eu diferenciar uma div quando eu clico em uma "Âncora"? por ex:

 

(links "âncora")

texto1 -- texto2 -- texto3 -- texto4

 

(link clicado - texto1)

(quando ir para a parte de baixo da página, fazer tipo uma borda em volta da div para identificar que foi nela que foi clicada EX:)

 

Texto1 : blablablablablablablablablabla (identificar que foi o texto 1 foi clicado!)

 

Texto2 : suahusuahusuahusuahusuahusuahu

 

Texto3 : kospokospksoksposkpsoksposkpso

 

Texto4 : rsrsrsrsrsrsrsrsrsrsrsrsrsrsrs

 

 

Se tiver como fazer, por favor me deem uma luz ai ^_^

 

Abs.

Vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Só com CSS não.

Vou mover sua dúvida para a seção de Javascript.

 

Movido: Webstandards :seta: Javascript

 

Respondendo sua dúvida.

Tente assim:

<!DOCTYPE html>
<html>
<head>
	<title>Hashes</title>
	<style type="text/css">
		.currFocus {
			border: 1px solid #FFF;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var anchors = document.getElementsByTagName('a');
			var hash = document.location.hash;
			for(var i = 0; i < anchros.length; i++){
				if(anchors[i].getAttribute('href').match(/^#/)){
					anchors[i].onclick = function(e){
						//Remove a classe 'currFocus' do elemento previamente selecionado
						var currFocus = document.getElementsByClassName('currFocus');
						for(var j = 0; j < currFocus.length; j++){
							currFocus.className = '';
						}

						//Adiciona a classe 'currFocus' ao elemento referenciado pela ãncora
						var href = this.getAttribute('href');
						var id = href.replace('#', '');
						var elem = document.getElementById(id);
						if(elem != undefined){
							elem.className = 'currFocus';
						}
					}
				}
			}
		}
	</script>
</head>
<body>
	Seu HTML vai aqui...
</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