Prevent href=“#” link from changing the URL hash

问题

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 mass with overriding css attributes.

thanks.

回答1:

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.)

回答2:

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();
});

回答3:

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

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

回答4:

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)"?

回答5:

Simply use this:

<a href="javascript:void()">text</a>

回答6:

This works for me.

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

回答7:

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;

        });

回答8:

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();
    }
});

回答9:

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

回答10:

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>

回答11:

I picked it very lately, but I tried removing href attribute complete from the tag and it worked fine. insted of

<a href="#" onclick="something"></a>
    use 
<a onclick="something"></a>

来源：https://stackoverflow.com/questions/20215248/prevent-href-link-from-changing-the-url-hash

标签

javascript

html

zurb-foundation