Remove <a> functionality

I've seen this done before, but I'm not exactly sure where.

I'm using the href attribute of <a class="classname"> to denote a specific id on the page, because jQuery plugin I have, uses the href attribute to define which id to do utilize.

Of course, when it's clicked, the page scrolls down to the top of the id, which I really don't want (I want the page to stay in开发者_StackOverflow社区 the same position).

Is there any way that I can keep the href attribute the same, but nullify the "linking" functionality of <a class="classname">?

---

add the following attribute:

onclick="return false;" 

---

$(document).delegate('.classname', 'click', function (e) {
   e.preventDefault();
});

---

Expanding on Mr. Samuel's and Mr. Ruby's answer, you can apply this to all your elements with jQuery:

$("a.classname").attr("href", "javascript:void 0").attr("onclick", "return false;");

---

For jquery, sounds like you need to use preventDefault().

<a href="#thisWontWork" class="classname">link</a>

<script type="text/javascript">
$('.classname').click(function(e) {
e.preventDefault();
//do other stuff
});
</script>

or even something like this...

<a href="#thisWontWork" onclick="something(); return false;">link</a>

---

return false; 

will do both preventDefault and event bubling too

<a id="clickme" href="#">click me href </a>    
    $(document).ready(function() {
        $("#clickme").click(function() {
            alert("clicked!");
            return false;
        });
    });

---

<a href="someLink" class="classname">link</a>
<script type="text/javascript">
$(document).ready(function(){
      $('.classname').each(function(){
           $(this).click(function(){
               //do whatever you want
               alert($(this).attr('href'));
               return false;
           });
      });
});
</script>

Hope this is useful for multiple link with same class name.