CODEWITHSUNDEEP
phpjquery
twigg
twigg

Reputation: 3993

<a href="#" adds localhost# to the address bar?

I'm having a play with jQuery to make a few divs show/hide on my local server. Now it works fine on a test page but when i put it into my test app (written in PHP and HTML) every time I use 

<a href="#"

to create a hook it actually links too locahost/testsite/localhost#

What could be adding that extra localhost# on to the end of my URL's?

<script type="text/javascript" language="JavaScript">
        function controlFooterNotes(v){
                if(v==1) $("#footer_notes").show(50);
                else     $("#footer_notes").hide(50);
        }

        $(document).ready(function(){
                $("#show_footer_notes").click(function(){
                        controlFooterNotes(1);                      
                });
                $("#hide_footer_notes").click(function(){
                        controlFooterNotes(0);                      
                });
        });
</script>

and the html im using

This is an example of the <a href="#" id="show_footer_notes">Click this link</a>
<div id="footer_notes">
        <a href="#" id="hide_footer_notes">Click here to hide this part.</a>
</div>

Upvotes: 1

Views: 308

Answers (4)

Springie
Springie

Reputation: 718

An alternative to e.preventDefault(), if you don't want to use it or are not using a JS library, is to replace the

<a href="#">link</a>

For

<a href="javascript:void(0);">link</a>

May not look elegant but it works.

Upvotes: 0

shishirmk
shishirmk

Reputation: 425

You need to stop the default action.

$(document).ready(function(){
  $("#show_footer_notes").click(function(event){
    event.preventDefault();
    controlFooterNotes(1);                      
  });
  $("#hide_footer_notes").click(function(event){
    event.preventDefault();
    controlFooterNotes(0);                      
  });
});

Upvotes: 1

jtheman
jtheman

Reputation: 7491

Use preventDefault() to stop normal event behaviour. Works with links, form posts etcetera.

$(document).ready(function(){
            $("#show_footer_notes").click(function(e){
                    e.preventDefault();
                    controlFooterNotes(1);                      
            });
            $("#hide_footer_notes").click(function(e){
                    e.preventDefault();
                    controlFooterNotes(0);                      
            });
    });

Documentation here: http://api.jquery.com/event.preventDefault/

Upvotes: 0

str
str

Reputation: 44989

Your "click this link" adds the # to the url. Use the following code to prevent it:

            $("#show_footer_notes").click(function(e){
                    controlFooterNotes(1);          
                    e.preventDefault();            
            });

Upvotes: 0

Related Questions