[Resolvido] Manter efeito hover ao clicar em algum item do menu

[allex_carvalho 124]

Boa tarde.

 

Possuo um menu com a seguinte estrutura:

 

<ul id="menu">
               <li>
                   <a style="background: url(@img/contatos.png) no-repeat; cursor: pointer; width: 122px; height: 24px;" href="contato.php" onClick="AparecerDiv();" title="CONTATOS"></a>
               </li>
</ul>

 

Onde o AparecerDiv(); defini display block para uma div oculta que receberá o conteudo requirido ao clicar em algum item do menu.

 

A intenção é clicar em contato e o efeito de passar o mouse sobre o menu continuar selecionado após clicar.

 

Como fazer isso nessa estrutura?

 

Obrigado pela atenção.

 

Tentei definir o background da seguinte forma:

 

<script type="text/javascript">
   $(document).ready(function(){
       $("#menu a").click(function( e ){
           e.preventDefault();
           var href = $( this ).attr('href');
           $("#contConteudo").load( href );
		$("#menu a").style.backgroundPosition= "0 -24px";
       });
   });
</script>

 

Os itens do menu são imagens, a hover está embaixo, começa com 24px de altura.

 

Obrigado.

[William Bruno 1501]

a sintaxe correta em jQuery, seria assim:

$("#menu a").css('backgroundPosition','0 -24px');

 

 

Porém considere trabalhar com classes, ficará bem mais simples, e com melhor performance.

E se você quer alterar apenas o item clicado, existe o this.

 

Leia:

http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/

[allex_carvalho 124]

Hum... Nunca tinha entendido a função real do this. Vamos por em pratica aqui :)

 

 

Obrigado.

 

William Bruno. Não entendi bem o funcionamento...

 

Seria necessario receber o conteudo no this com uma variavel? Foi neste caminho que segui. Veja como ficou:

 

<script type="text/javascript">
var $this = $( document.getElementById('menu a') );
	$this.click(function(){
		$this.css('backgroundPosition','0 -24px');
	})
</script>

 

Obrigado pela atenção.

[William Bruno 1501]

nossa cara... você precisa realmente parar de usar jQuery..

 

não misture !!!

se ta usando jQuery, use jQuery, se vai usar javascript, entenda as diferenças..

 

isso aqui:

getElementById('menu a') 

não vai funcionar nunca !!

 

http://wbruno.com.br/blog/2011/04/04/nao-jquery-nao-aprenda-qualquer-framework-antes-de/

 

 

Eu só "guardo" o this em uma variavel, por questões de performance, para não ter que ficar chamando o seletor toda vez que for usar.

No caso, você não entendeu absolutamente nada sobre o objeto this. Oque você fez está completamente errado em conceitos.

[allex_carvalho 124]

Certo. defini na variavel da forma que havia definido antes, assim:

 

<script type="text/javascript">
var $this = $( '#menu a' );
	$this.click(function(){
		$this.css('backgroundPosition','0 -24px');
	})
</script>

 

E ele continua pegando todos os elementos do menu.

 

Obrigado.

[William Bruno 1501]

não amigo.. ai você não está usando o this!

 

note a diferença:

<script type="text/javascript">
$( '#menu a' ).click(function(){
   var $this = $( this );
   $this.css('backgroundPosition','0 -24px');
});
</script>

entendeu agora ?

[allex_carvalho 124]

Sim... Enfim sim :)

 

Agora ele mantem selecionado o menu certinho, porém, quando eu vou clicando em outros ele vai deixando os anteriores selecionados também. Não "desmarca" os itens restantes. Na linha que define a altura da posição da imagem tentei repetir ela com valores 0 e não deu certo. Tem alguma função que volte o item que não estiver ativo do menu? Pois preciso que fique selecionado somente o último item clicado.

 

Obrigado.

[William Bruno 1501]

Por esse motivo que eu sugeri que você trabalhasse com classes.

 

Seria mais ou menos assim:

<script type="text/javascript">
$( '#menu a' ).click(function(){

   $( '#menu a' ).removeClass( active );
   $( this ).addClass('active');
});
</script>

 

manjou ?

fica mais limpo, doq você ficar alterando css diretamente no js:

<script type="text/javascript">
$( '#menu a' ).click(function(){

   $( '#menu a' ).css('backgroundPosition','0 0');
   $( this ).css('backgroundPosition','0 -24px');
});
</script>

[allex_carvalho 124]

Entendi sim. Deveria usar o this somente na linha que altera a posição do background.

 

Mais uma vez obrigado pela atenção.

 

:)