单击时在URL中隐藏＃

Question

I have the following code:

<p>
    <a href="#" id="sobo-einblenden">einblenden</a>
    <a href="#" id="sobo-ausblenden">ausblenden</a>
</p>
<div id="sozialbookmarks">
    <p>
        <b>Bereich für social bookmarks</b><br>
        Hier kommen nun die üblichen Verdächtigen und Logos dazu.<br>
        Nicht vergessen, meine Seite zu bookmarken!
    </p>
</div> 
<div id="sozialbookmarks2">
    <p>
        <b>Bereich für social bookmarks</b><br>
        Hier kommen nun die üblichen Verdächtigen und Logos dazu.<br>
        Nicht vergessen, meine Seite zu bookmarken!
    </p>
</div>

When I click on <a href="#" id="sobo-einblenden">einblenden</a> in the browser I will see: site.php# . How can I make it so that the # is not added to the URL?

Answer 1

Use event.preventDefault()

$('a').click(function(event){
    event.preventDefault();
});

Answer 2

As noted in Dhara Parmar's answer , you can use a simple jQuery event listener on all the <a> elements to prevent the default action (going to the hash) when clicked.

Here's a way to accomplish the same thing with vanilla JavaScript:

// all anchors
var elements = document.getElementsByTagName("a");

for (var i = 0; i < elements.length; i++) {
  // attach event to each anchor tag
  elements[i].addEventListener("click", function(event) {
    // prevent default action when clicked
    event.preventDefault();
  });
}

There's a similar question regarding how to preventDefault() with vanilla JavaScript that can be found here.