58

I have a site that already takes advantage of the hash in the URL and I don't want it changed. When I use Zurb Foundation and use href="#" for the menu item, clicking on it removes the previous hash value.

How can I override this behavior?

Update: I think that it's better to stay with element because when I change it, it changes the styling that is bound to that HTML element. I always prefer when using with a design framework to stay with the default conventions and not mess with overriding css attributes.

thanks.

5
  • I just follow the Zurb Foundation docs and they use href="#" in the menu item links Nov 26, 2013 at 11:06
  • you can leave it empty, that still is valid
    – user2587132
    Nov 26, 2013 at 11:11
  • Could you paste your menu html? What’s the point of a menu that does nothing? Nov 26, 2013 at 11:11
  • It does, it has onclick event on each <a> - I added it. Nov 26, 2013 at 11:13
  • @user2587132 That was a good idea: it works great! Using href="" worked in my test right now: no more changing the url AND the link style looks correct.. Apr 22, 2020 at 0:00

10 Answers 10

46

You can listen for the click event and call preventDefault to stop the browser from setting the hash.

Example with jQuery:

$('.mylink').click(function(event){
    event.preventDefault();
});
1
  • 4
    you can also return false, which is shorthand for both event.preventDefault and event.stopPropagation Oct 16, 2016 at 23:11
39

Please read up on Progressive Enhancement and Unobtrusive JavaScript.

You should (almost) never have href="#". It is a link to an undefined anchor (which will be the top of the page). People who use it normally do so because they want to dangle JavaScript off it.

If you are going to have a link, then it should point to somewhere useful. Typically this will be another page that uses server side technology to get the same effect (albeit less quickly) as the JavaScript would give. You can then prevent the normal behaviour of the link.

For example:

<a href="/foo/bar" class="whatever">Foo: Bar</a>

With the script:

addEventListener('click', function (ev) {
    if (ev.target.classList.contains('whatever')) {
        ev.preventDefault();
        loadWithAjax(ev.target.href);
    }   
});

If the JavaScript does something that can't have equivalent functionality expressed in a link, then you shouldn't be using a link in the first place. Use a <button>, and seriously consider adding it to the document using JavaScript/DOM instead of HTML.

(NB: Quite a lot of people want to support older browsers which don't recognise classList or addEventListener checking browser support and finding compatibility routines is left as an exercise for the reader. Using YUI, jQuery or similar is one approach for dealing with compatibility.)

6
  • Thanks. They use <a> for the style. If I remove it, it changes the style and therefore I prefer staying with their code conventions (foundation.zurb.com/docs/components/dropdown.html) instead of massing around with css Nov 26, 2013 at 11:16
  • and seriously consider adding it to the document using JavaScript/DOM instead of HTML, Why?
    – user2587132
    Nov 26, 2013 at 11:21
  • 2
    So you don't end up with a UI control that does nothing if the JS fails to load.
    – Quentin
    Nov 26, 2013 at 11:28
  • Sometimes you have to use <a> like for menu items in a dropdown list with Spectre CSS, and without the href the cursor does not change to pointer -- I suppose you could override the style but geez...
    – user9645
    Sep 8, 2017 at 20:12
  • @user9645 — Looking at the example you link to … those are intended to be regular links, with href attributes containing useful URLs. They shouldn't use href="#" (the code in the example does, but only as a placeholder), so my answer stands.
    – Quentin
    Sep 8, 2017 at 20:19
37

Instead of having # in href, you can use javascript:; in href which will not let the url change.

<a href="javascript:;">:Link</a>
2
14

Instead of using "#" use "javascript:void(0)" See this link for more information Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

11

Simply use this:

<a href="javascript:void()">text</a>
1
  • Sometimes you can't avoid using # target. For example when using Foundation components (tabs). Aug 17, 2016 at 10:04
5

I've done the following to prevent all the tags with href="#" attribute perform navigation (Using JQuery):

$('a[href$="#"]').click(function (event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;

        });
1
  • Is the dollar sign (a[href$="#"]) a typo?
    – code
    May 17, 2021 at 0:41
4

This works for me.

$(document).on('click', 'a', function (e) {
    if ($(this).attr('href') == '#') {
        e.preventDefault();
    }
});
2

Have below code in your default library.
This will take the href value on click event and if hash (#) value found, then it will prevent the default event which will avoid redirecting to href value.

$(document).on('click', 'a', function (e) {
    if ($('#'+e.target.id).attr('href')=='#') {
        e.preventDefault();
    }
});
1

Easiest way to do this is <a href="#hash" onclick="event.preventDefault();"></a>

0

My solution is a little the same, using Javascript:

-> Replace

<a href=#foo class="ouvrir">Newsletter</a>

by:

<a href="javascript://" class="ouvrir">Newsletter</a>

And the Javascript:

<script>
    $('.ouvrir').click(function(event){
        window.location.href = "#foo";
        history.pushState('', document.title, window.location.pathname);
    });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.