How to prevent fragment identifiers from showing in url

Question

I have a link like this

    <a href="#login_form">Log in</a>

after clicking on the link the url changes from

   http:/domain.com

to

   http://domain.com#login_form

and a login form pops up. But i do not want hash tag to be displayed in url. How to do this using java script? No java script used to display login form which pops up.

The login form is something like this.

    <a href="#x" class="overlay" id="login_form"></a>
    <div class="box">
    <h2>LOG IN</h2>
    <form name="login" action="" method="post">
    </form>
    </div>

OK. HERE IS THE JS FIDDLE. PLEASE CHECK.

http://jsfiddle.net/vq24P/1/

Answer 1

It's called a document fragment, not a hash tag, but whatevs.

If, as you say, "no java script [is] used to display login form", I can only assume you're using the CSS :target psuedo-class to toggle visibility? In that case, there's nothing you can do. The fragment MUST be in the URL for that element to show up.

Instead, use some JavaScript to do the toggling for you. Something like:

<a href="javascript:void(document.getElementById('login_form').style.display = 'block');">Log in</a>

(WARNING: Extremely bad example, but it should get the general idea working)

You will need to use id="login" instead of name="login"