Ir para conteúdo

POWERED BY:

Arquivado

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

Durbano

[Resolvido] JQuery click event

Recommended Posts

Boa noite senhores,

 

Visualizem o seguinte, tenho um menu e neste menu há vários itens então sempre que clicar será feito um FADEOUT no conteudo e em seguinte abrirá uma nova página.

 

Estou com um problema para deixar isto dinâmico.Segue o código abaixo.

Verifiquem que a página contato.php está hard code

 

$('#navigationMenu').click

(

function()

{

$('#content').fadeOut

(

'slow'

,function () {document.location.href = "index.php?PageName=" + "contato.php";}

);

}

);

 

Esta parte em negrito deveria variar de acordo com o que eu selecionar no menu,alguma ideia ?

 

 

 

Obrigado desde já !

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom... Se essa #navigationMenu for a ul, tente assim:

 

$('#navigationMenu a').click(function(){
	var href = $(this).attr("href");
	$('#content').fadeOut('slow',function (){
		document.location.href = "index.php?PageName=" + href;
	});
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia Allex !

 

O #navigationMenu é uma UL no qual está todos os itens(links, LI) do menu.

Então eu precisaria identificar em qual ITEM foi clicado para que eu possa deixar dinâmico, eu achei uma saída mas não é a mais agradável segue abaixo:

 

       <div id="menu">
           <ul id="navigationMenu">
               <li>
                   <a id="navigationMenuHome" class="home" href="#">
                   <span>Home</span>
                   </a>
               </li>
               <li>
                   <a id="navigationMenuContato" class="contact" class="contact" href="#">
                       <span>Contato</span>
                   </a>
               </li>

<script>	
$('#navigationMenuHome').click
(
	function() 
	{
		$('#content').fadeOut
		(
			'slow'
			,function () {document.location.href = "index.php?PageName=" + "home.php";}
		);
	}
);

	$('#navigationMenuContato').click
(
	function() 
	{
		$('#content').fadeOut
		(
			'slow'
			,function () {document.location.href = "index.php?PageName=" + "contato.php";}
		);
	}
);

</script>  

 

Verifique que tive que praticamente duplicar o evento.

 

Tem mais alguma ideia ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tentou da forma que citei na primeira resposta:

 

$('#navigationMenu a').click(function(){
               var href = $(this).attr("href");
               $('#content').fadeOut('slow',function (){
                       document.location.href = "index.php?PageName=" + href;
               });
       });

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa tentei sim, mas sem sucesso.

 

Apenas para explicar o fluxo.

 

HTML Clico no Botão HOME(item do menu LI) >>

JS ele dispara o evento CLICK >>

JS faz o FADE OUT do conteudo >>

JS passa uma variavel metódo GET >>

PHP faz o include da página passada via parâmetro

 

se eu tentar fazer do modo como você diz, eu deveria colocar um LINK no HREF do botão HOME para página HOME, mas quando eu clico no botão HOME ele executa o evento mas não o efeito FADE OUT e carrega a página.

 

valeu pela ajuda...mas outra ideia :)/>/> ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tente assim então:

 

$('#navigationMenu a').click(function(event){
               event.preventDefault();
               var href = $(this).attr("href");
               $('#content').fadeOut('slow',function (){
                       document.location.href = "index.php?PageName=" + href;
               });
       });

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caraaa você acabou de me dar um ideia e funcionou !

 

segue o código abaixo:

 

       <div id="menu">
           <ul id="navigationMenu">
               <li>
                   <a id="navigationMenuHome" class="home" PageName="home.php" href="#">
                   <span>Home</span>
                   </a>
               </li>

               <li>
                   <a id="navigationMenuContato" class="contact" PageName="contato.php" href="#">
                       <span>Contato</span>
                   </a>
               </li>

<script>	
$('#navigationMenu a').click
(
	function() 
	{
		var PageName = $(this).attr("PageName");
		$('#content').fadeOut
		(
			'slow'
			,function () {document.location.href = 'index.php?PageName=' + PageName;}
		);
	}
);
</script> 

 

Dentro dos links criei um atributo que se chama PageName o valor dele é o nome da página, ai peguei este valor lá no JS var PageName = $(this).attr("PageName"); e coloquei a variável no valor passado via URL document.location.href = 'index.php?PageName=' + PageName;

 

Valeu Alex !!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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