How do I change that "#" sign for anchored links?
I am creating a slide menu in CSS and it is horrible this sign in the browser bar. Is there any workable solution? I read about jQuery Address, but I confess I did not understand "bullshit".
I'm using CSS to change the margin-left and make the div in question appear:
.panel:target{
margin-left: 0%;
background-color: #9887F8;
}
To change the href of an element you can do this:
elemento.href = 'http://stackoverflow.com';
You can also use .setAttribute that 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 you want to avoid having the # symbol in the URL, you can use href="javascript:void(0)" . If you do not have it this way, you can use:
$("a").attr("href", "javascript:void(0)"); // talvez queira ser mais específco e usar $("#meuSlideShow a")...
Using # is an old and very useful trick. This # stop at URL can be avoided with .preventDefault() too. But it seems to me that it is the wrong tool if what you want is just not showing # .
But for this functionality does not need an anchor, it can work as well or better with another element like <li> , <fiv> or even <button> ...
Now seeing your HTML and CSS, here's 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%';
});
There is no way to change this symbol, because if you change it would not be an anchor.
What you can do is prevent the click event from propagating, preventing the browser from performing the default click action. It's very simple. Just use preventDefault() of 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
});