Ir para conteúdo

POWERED BY:

Arquivado

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

lucianoshl

[Resolvido] eventos onclick para cada link de uma div

Por , em Javascript

Recommended Posts

lucianoshl    0

lucianoshl
Postado

Ola

 

estou desenvolvendo um site e me surgiu uma duvida, eu tenho uma div com links, todas os links dessa div tem o evento onclick igual, a mesma funcao no caso ela se chama carregaConteudo(), eu coloquei o evento onclick chamando a funcao em cada um dos links, mais eu queria saber se tem como fazer da seguinte forma, pelo javascript eu seleciono cada um desses links e coloco o evento onclick neles automaticamente sem precizar colocar la no <a onclick=funcao ></a>, como por exemplo em uma funcao que fica no onload, e essa funcao faça isso, nao sei se tem como fazer isso mais quem puder me dar uma luz ai, eu ja agradeco

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tem um exemplo aqui:

http://forum.imasters.com.br/index.php?/topic/378917-abrir-pagina-externa-a-cada-1-click/page__p__1469188entry1469188

 

navegue pelo documento com as funções: getElementsByTagName, getElementById..

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucianoshl    0

lucianoshl
Postado

opa obrigado cara consegui fazer um exemplo aqui e ja vo aplicar ele, vo deixar ele aqui pra quem estiver com a mesma duvida

 

teste.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>Untitled Document</title>
<script src="teste.js" type="text/javascript"></script>
</head>
<style>
	a { color:#000; text-decoration:none;}
	ul { list-style:none;}
	#div1{ width:100px; background-color:#09C; border:#03F solid 1px; float:left; margin:5px; padding:5px;}
	#div2{ width:100px; background-color:#03F; border:#09C solid 1px; float:left; margin:5px; padding:5px;}
</style>
<body>
<div id="div1">
	<ul>
        <li><a href="#1">teste1</a></li>
        <li><a href="#2">teste2</a></li>
        <li><a href="#3">teste3</a></li>
        <li><a href="#4">teste4</a></li>
        <li><a href="#5">teste5</a></li>
        <li><a href="#6">teste6</a></li>
        <li><a href="#7">teste7</a></li>
    </ul>
</div>
<div id="div2">
	<ul>
        <li><a href="#9">teste1</a></li>
        <li><a href="#10">teste2</a></li>
        <li><a href="#11">teste3</a></li>
        <li><a href="#12">teste4</a></li>
        <li><a href="#13">teste5</a></li>
        <li><a href="#14">teste6</a></li>
        <li><a href="#15">teste7</a></li>
    </ul>
</div>
</body>
</html>

teste.js

window.onload = teste;

function teste()
{
	var div1 = document.getElementById('div2'); // pego a div que eu quero
	var links = div1.getElementsByTagName('a'); // pego todos os elementos 'a' dessa div
	
	var i = 0;
	
	while (i<links.length){ // passo por todos 'a' impares da div (teste1,teste3,teste5,...) e coloca a funcao no evento onclick
		links[i].onclick = function(){ msg('onclick sem colocar no html');}
		i += 2;
	}
}

function msg(x){
	alert(x);
}

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