[Resolvido] Usando o siblings()

[marcelo2605 10]

Tenho a seguinte estrutura html:

 

           <div id="continentes">
       	<ul>
           	<li><div class="block"></div><a href="#america_sul">América do Sul</a></li>
               <li><div class="block"></div><a href="#america_norte">América do Norte</a></li>
               <li><div class="block"></div><a href="#europa">Europa</a></li>
               <li><div class="block"></div><a href="#africa">África</a></li>
               <li><div class="block"></div><a href="#asia">Ásia</a></li>
               <li><div class="block"></div><a href="#australia">Austrália</a></li>
           </ul>
       	</div>

 

E esse script:

 

var botao = $('#continentes ul li a');

botao.click(function(e){
       e.preventDefault();
var $this = $(this); 
$this.addClass('negrito');
$this.siblings($this).removeClass('negrito');	
var $nome = $this.attr('href');
$($nome).show('slow'); 
$($nome).siblings('.apagar').hide('slow');
       });

 

Mas neste caso, o siblings que deveria tirar o negrito dos outros itens não está funcionando.

[JCMais 75]

Troque

$this.siblings( $this ).removeClass( 'negrito' );

 

por

 

$this.parents( 'ul' ).find( 'a' ).not( $this ).removeClass( 'negrito' );

[marcelo2605 10]

JCMais, obrigado pela ajuda.

 

Não tinha visto o post editado. Agora deu certo.

 

mais uma coisa se não for abusar: o div block funciona com uma função mouseover

 

var block = $('.block');

botao.mouseover(function(){
	var $this = $(this);
	$this.prev(block).show();
});

botao.mouseleave(function(){
	var $this = $(this);
	block.hide();
});

 

Queria também que, quando clicasse em um continente, o block permanecesse.

 

Tentei usar o mesmo código, mas não está dando certo:

 

$this.prev().addClass('block2');
$this.parents( 'ul' ).find( '.block').not($this).removeClass('block2');