I use the bootstrap to create applications for the web and I have come to realize that in many examples, they use the <a href> buttons as in this link . I wanted to know how I can work in the same way without having to change the location of my page. Today whenever I need to use this tag, I have to reference a null element on the screen as in the example below:
<a href="#">teste</a>
You probably want to use a link to change a certain part of the page or some action without adding www.site.com/index.html# right? You can do this in a number of ways, one of them, although it is not a very "cool" way using the JQuery% method .
HTML Code:
<a href="#" id="meu-link">Meu link</a>
<div id="minha-div">Meu conteúdo.</div>
JQuery code:
$('#meu-link').click(function(e) {
e.preventDefault(); // Evita o evento padrão da ação seja executado, neste caso, evita que o link chame uma nova URL no browser
// Ações
// exemplo: $('#minha-div').html('Meu novo conteúdo.');
});
Documentation: link
There is a way to leave a link using javascript.
Example:
<a href="javascript:void(0);">Seu Link</a>
This way, your page will not "jump" when you click it.
There are two possibilities for the a tag to not change the current url.
<a href="#" onclick="return false;">...</a>
<a href="javascript:void(0);">...</a>
An easier solution to implement that I like to use in my scripts is the following (example using jquery):
$(document).ready(function() {
$("a[href='#']").attr("href", "javascript:void(0);");
});
In this way, you do not have to change the links manually and all links on the page that have the href attribute equal to # will be automatically changed to not influence the url. But it's worth remembering that links added on the screen after the script is run will not be affected.