1

Como alterar aquele sinal de "#" dos links ancorados?

Estou a criar um menu slide em CSS e é horrível este sinal na barra do navegador. Há alguma solução viável? Li a respeito do jQuery Address, mas confesso que não entendi "bulhufas".

Eu estou a usar CSS para mudar o margin-left e fazer a div em questão aparecer:

.panel:target{
    margin-left: 0%;
    background-color: #9887F8;
}

jsFiddle

2 Respostas 2

3

Para mudar o href de uma elemento podes fazer assim:

elemento.href = 'http://stackoverflow.com';

Podes usar também o .setAttribute que altera no HTML diretamente:

elemento.setAttribute('href', 'http://stackoverflow.com');

são maneiras diferentes, com algumas diferênças.


Com jQuery podes fazer com .attr() ou .prop() seguindo a mesma lógica:

$("a").attr("href", "http://www.outra.coisa/");

Se o que quer é evitar ter no URL o simbolo #, pode usar href="javascript:void(0)". Se não o tiver assim de inicio, pode usar:

$("a").attr("href", "javascript:void(0)"); // talvez queira ser mais específco e usar $("#meuSlideShow a")...

Usar # é um truque antigo e muito útil. Esse # ir parar à URL pode ser evitado com o .preventDefault() também. Mas parece-me que é a ferramenta errada se o que quer é somente não mostrar o #.

Porém para essa funcionalidade não precisa de uma ancora, pode funcionar tão bem ou melhor com outro elemento como <li>, <fiv> ou até <button>...


Vendo agora o seu HTML e CSS, aqui fica uma nova solução, com jQuery:

var elementosMenu = $('.slide_menu .panel');
$('#page a[id^="link-"]').on('click', function(e){
   e.preventDefault();
    elementosMenu.css('margin-left', '-102%');
    var targetID = this.getAttribute('href').substr(1);
    document.getElementById(targetID).style.marginLeft = '0%';
});

jsFiddle: http://jsfiddle.net/Lx4Vz/

2
  • É verdade, tinha me esquecido completamente do void(0). Perfeito!
    – rafaels88
    Commented 29/06/2014 às 7:35
  • 1
    Cara se salvou a pátria thanks man! Resolveu em 100%! Commented 29/06/2014 às 12:20
0

Não há como mudar este símbolo, pois se você mudasse não seria mais uma âncora.

O que você pode fazer é impedir que o evento de click se propague, impedindo que o browser execute a ação padrão do click. É bem simples. Basta usar o preventDefault() do jQuery.

Exemplo:

HTML

<a class="link" href="#">Clique me</a>

JAVASCRIPT

$(".link").click(function(event){
    event.preventDefault();
    // Aqui entra o resto do seu código referente ao que quer fazer com o click do usuário
});
4
  • O click chama na tela uma div com o atributo id...más mostra na barra do browser o id da div tipo (#galeria). Estou tentando contornar isto. Estou dando uma olhada em [link]github.com/tombonner/jurlp que diz fazer isto...más por hora ainda não resolvi :( Commented 29/06/2014 às 6:39
  • Pode colocar esse código aqui pra eu analisar?
    – rafaels88
    Commented 29/06/2014 às 6:45
  • jsfiddle [link] jsfiddle.net/subversivo58/F8LxF Commented 29/06/2014 às 6:51
  • Então, temos um problema. Você pode usar o stopPropagation() assim: jsfiddle.net/nqV95/1 Porém, ele irá impedir a execução padrão do elemento <a>, ou seja, a animação não vai funcionar. Você teria que criar essa animacao no JS, e não no CSS. Não creio que seja possível fazer o que você quer desta forma.
    – rafaels88
    Commented 29/06/2014 às 7:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .