How to change anchor links URL?

Question

How to change that "#" sign of the anchored links?

I am creating a slide menu in CSS and it is horrible this sign in the browser bar. Is there a workable solution? I read about the jQuery Address, but I confess I didn’t understand "bulhufas".

I’m using CSS to change the margin-left and make the div in question appear:

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

jsFiddle

Answer 1

To change the href of an element you can do like this:

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

You can also use the .setAttribute changes in HTML directly:

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

are different ways, with some differences.

---

With jQuery you can do with .attr() or .prop() following the same logic:

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

If what you want is to avoid having the symbol in the URL #, can use href="javascript:void(0)". If you don’t have it like that at first, you can use:

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

Use # is an old and very useful trick. That # go to the URL can be avoided with the .preventDefault() also. But it seems to me that is the wrong tool if what you want is just not to show the #.

But for this feature does not need an anchor, can work as well or better with another element like <li>, <fiv> or even <button>...

---

Now seeing your HTML and CSS, here is a new solution, with 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/

Answer 2

There’s no changing this symbol, because if you changed it would no longer be an anchor.

What you can do is prevent the click event from spreading, preventing the browser from performing the default click action. It’s quite simple. Just use the preventDefault() jQuery.

Example:

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
});